Within a Vue 3 project that utilizes TypeScript, there are two properties named 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 value of i18nLocale.locale is updated, my computed locale changes along with my content. This functionality works properly.
However, if I attempt the same thing using the commented-out line with ref(), nothing gets updated. Is it necessary to use computed, or would using ref() be sufficient?