I am encountering an issue with a non-reactive data object nested inside another object in my Vue.js template. Here is the code snippet:
<template>
<div>
<b-container
class="bg-white text-center scrollBehavior"
>
...
</b-container>
</div>
</template>
<script>
...
export default {
data: function() {
return {
...
};
}
methods: {
calculateRequest(categoryIndex, selection) {
...
},
}
};
</script>
When I click on a <b-button>, it should receive an active class, but it doesn't update as expected. The data does get updated, as shown in the console log output, but the UI does not reflect the change. Interestingly, modifying the data structure from {1: {}} to {1: {"0": ["1"]}} resolves the issue.
Any insights on what could be causing this behavior?