Does a ref unref its ref contents?

^{Sorry for the weird title}

I am using Vue3 with Highcharts. I need to have a reactive Object that is being passed to the chart (and when its contents change the chart is updated). It works great.

At some point I wanted to format the tooltip which appears when hovering over data. This is done in the configuration object this way:

const phishingMap = ref<Record<number, Result>>({})

const chartOptions = ref({
  tooltip: {
    formatter: function () {
      console.log(this.x)
      console.log(phishingMap.value[this.x])
      console.log(phishingMap[this.x])
      return phishingMap[this.x].Name + '<br>' + phishingMap[this.x].Total
    }
  }
})

I was intilally returning phishingMap.value[this.x].Name and was having an error on phishingMap.value, to being defined. Working with Vue for some time, I got used to add .value to my reactive variables so I was quite lost.

I then added a few debug data per the code above. To my surprise, the proper way to address the Object is with a bare phishingMap and not phishingMap.value.

It is a case of the inception of a ref variable in a ref variable. I experimentally found out that the inner ref should be addressed directly and not by .value - what is the reason for that?

Accessing a ref from a function inside another ref does not change the way you access it. You still need .value to get to the ref's content. Your code should give you an "cannot access property on undefined" error. Compare it with the code in the snipped (consistently using .value):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { ref } = Vue;
const phishingMap = ref({})

const chartOptions = ref({
  tooltip: {
    x: 'foo',
    formatter: function () {
      console.log('property (x) is', this.x)
      console.log('phishingMap.value is', phishingMap.value)
      console.log('resolved property is', phishingMap.value[this.x])
      return phishingMap.value[this.x].Name + '<br>' + phishingMap.value[this.x].Total
    }
  }
})

phishingMap.value.foo = {Name: 'le Name', Total: 'le total'}
console.clear()
console.log('returned value is', chartOptions.value.tooltip.formatter())

<!-- language: lang-css -->

.as-console-wrapper { max-height: 100% !important; top: 0; }

<!-- language: lang-html -->

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- end snippet -->

My guess is that you are overriding the ref itself instead of its value somewhere, for example when you load phishingMap (are you sure you instantiate it with const)?

phishingMap = await loadPhishingMap() // <--- phishingMap will not be a ref after this