I have the following code:

    <template>
      <div  style="min-height: 320px;>
       <q-select style="min-width: 92px;"  outlined :options="options" label="Número de parcelas" emit-value map-options v-model="installments"></q-select>
      </div>
  </template>

    <script>
    import { useQuasar } from 'quasar'
    import { useStore } from 'vuex'
    import { defineComponent, ref, computed } from 'vue'
    
    export default defineComponent({
      name: 'PageIndex',
      components: {
        loading
      },
    
      setup () {
        const store = useStore()
        const $q = useQuasar()
        let installments = ref(12)
        const product = computed(() => {
          return store.getters['checkout/getCheckoutProduct']
        })
        let options = ref([
          {
            label: `12x de R$ ${(product.value.price / 12)}`,
            value: 12
          },
          {
            label: `11x de R$ ${(product.value.price / 11)}`,
            value: 11
          }
        ])
        return {
          product,
          options,
          installments
          }
      }
    })
    </script>

The problem is that is returning UNDEFINED, even product.value.price correctly showing inside VUE devtools inside my vuex. Also, other places on component are getting the product value, but... the 'options' do not work.

Note that options have the variable inside it, how can i pass a variable from computed to the ref() variable ?!

CodePudding user response：

Ref will be invoked only one time. It is used in setup, so it works like onCreated hook. You should have used computed property. It calculates reactive content.

Check my demo:

https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-4u0lj?file=/src/views/Home.vue