Currently, I am utilizing Vue's Composition API in my project. However, I have encountered an issue where the template renderer does not recognize changes when I add a property to a ref object. Below is the code snippet that demonstrates this problem:
<template>
<div id="app">
<button @click="updateObj">Click</button>
<div v-if="obj[1]">{{ obj[1] }}</div>
</div>
</template>
<script>
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
name: "App",
setup() {
const obj = ref({});
const updateObj = () => {
obj.value[1] = "hello";
console.log(obj.value);
};
return {
obj,
updateObj,
};
},
});
</script>
Upon clicking the button which triggers the updateObj function, the property "1" of the obj object is set to "hello". The expected behavior is to see "hello" displayed in the browser if obj[1] is set, but no text is rendered. You can view a demo here on CodeSandbox.
As someone who has been working with the Composition API for quite some time now, this issue perplexes me. I have attempted using reactive instead of ref, but unfortunately, the problem still persists.