JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <div>Parent:</div>
  <div><button @click="modifyDeletedAt">Modify deletedAt (should not trigger)</button></div>
  <div><button @click="modifyText">Modify text (trigger - ok!)</button></div>

  <child :current-note="note"></child>
</div>

JavaScript

class Note {
  constructor() {
    this.type = '';
    this.id = 'asdsad';
    this.text = 'text';
    this.title = 'title';
    this.tags = [];
    this.deleted = false;
    this.deletedAt = '';
    this.erased = false;
    this.erasedAt = '';
    this.archived = false;
    this.archivedAt = '';
    this.deleteOn = '';
    this.pinned = false;
  }
}

const app = Vue.createApp({
  setup() {
    const note = Vue.reactive(new Note())

    const modifyText = function() {
      note.text = note.text + '+'
    }
    const modifyDeletedAt = function() {
      note.deletedAt = note.deletedAt + '+'
    }

    return {
      note,
      modifyDeletedAt,
      modifyText
    }
  },
})

app.component('child', {
  props: ['currentNote'],
  setup(props) {
    const note = Vue.toRef(props, 'currentNote')
    const changes = Vue.ref(0)

    const toWatch = Vue.computed(() => [Vue.toRef(note.value, 'text')])
    Vue.watch(toWatch, () => {
      changes.value++
    })

    return {
      note,
      changes
    }
  },
  template: `
    <div>Child: (changes = {{ changes }})</div>
    <div>text: {{ note.text }}</div>    
<div>text: {{ note.deletedAt }}</div>  
    `
})
app.mount('#app')