Vuejs Es6 class reactivity
The setter of a computed property, say myComputedProperty, is triggered when you assign to that property (e.g. this.myComputedProperty = {something: 'else'}.
What you probably are looking for is a watcher, more specifically, a watcher with deep: true, such as:
watch: { localClass: { deep: true, handler() { out.innerHTML += "watched!"; } }},Demo below.
class CustomClass { constructor() { this.selected = false }}Vue.component('custom', { template: '#custom', props: ['customClass'], computed: { localClass: { get() { return this.customClass }, set(value) { out.innerHTML += "changed!\n"; } } }, watch: { localClass: { deep: true, handler() { out.innerHTML += "watched!\n"; } } }, methods: { assignToSelected() { this.localClass.selected = true }, assignToLocalClass() { this.localClass = { selected: true } } }});new Vue({ el: '#app', data: { test: new CustomClass() },})#out { background: black; color: gray; }span { font-size: x-small; font-family: verdana }<script src="https://unpkg.com/vue"></script><template id="custom"> <div> {{ localClass }} <br> <button @click="assignToSelected">assignToSelected</button> <span>Note: will trigger "watched!" just once, because, since the value is hardcoded in the method (see code) subsequent clicks won't modify the value.</span> <br><br> <button @click="assignToLocalClass">assignToLocalClass</button> <span>Note: assignToLocalClass() will trigger the computed setter, but wont trigger the watcher because the computed setter currently sets nothing, so nothing changed for the watcher to trigger.</span> </div></template><div id="app"> <custom :custom-class="test"></custom></div><pre id="out"></pre>