When initializing my component, I use the following code snippet:
<custom :opts="{map: false}"></custom>
In the HTML, there is a similar structure like this:
<template id="custom">
<div v-if="opts.map">
I'm awesome
</div>
<button v-on:click="show"></button>
</template>
The JavaScript function involved is:
function show(){
this.opts = {map:true} // (1) <-- This works and reveals the hidden div
this.opts.map = true // (2) <-- Not functioning for some reason
Vue.set(this.opts, 'map', true) // (3) <-- Still not having any effect
}
My query pertains to why variant 2 fails to work and what modifications need to be made in order for the control to react to the value reset upon clicking the button. Alternatively, a detailed explanation elucidating the reason behind why (1) works while (2) doesn't would also be appreciated as an answer.