[SOLVED] Vue composition api reactive property

Vue composition api reactive property

Inside a vue 3 project using typescript, i got two property locale and content :

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from "vue-i18n"

import { Landing, Locales } from "@types";

interface Props {
  item: Landing;
}

const props = defineProps<Props>();

const i18nLocale = useI18n();

const locale = computed(() => {
  return i18nLocale.locale.value as unknown as Locales
})

const content = computed(() => {
  return props.item.content[locale.value]
})

// const locale = ref(i18nLocale.locale.value as unknown as Locales);
// const content = ref(props.item.content[locale.value]);
</script>

When the i18nLocale.locale.value is updated, my computed locale change, and my content too. This works fine.

But, if i do the same with the comment line using ref() nothing is update, using computed is required and it's the good way?

Solution

The commented lines declare refs with initial values. While those refs can be changed manually, they have no reference to the data origin and cannot react to them changing.

However, you don't need a computed property for locale, since i18nLocale.locale is already a ref. You can use it directly or, if you want to omit the i18nLocale, assign it to a variable:

const locale = i18nLocale.locale

But content has to be a computed property, since its value has to be re-computed when dependencies change (locale and item.content).