Vue $watch only once

index.js

// Reference: https://stackblitz.com/edit/vue-watch-only-once?file=index.js
import Vue from 'vue';

// Watch "isLive" via $watch to invoke the returned unwatch
// handler after the component went live for the first time.
// Because the websocket stays live and only die visualization
// is stopped.

const Child = Vue.component('child', {
  props: {
    isLive: {
      type: Boolean,
      default: false,
    }
  },

  data() {
    return {
      isWatching: false,
    }
  },

  template: `
    <div>
      <p>isLive: {{ isLive }}</p>
      <p>isWatching: {{ isWatching }}</p>
    </div>
  `,

  created() {
    this.isWatching = true;
    this.unwatchIsLiveProp = this.$watch('isLive', (newVal) => {
      console.log('Watcher was called');
      if (newVal) {
        this.unwatchIsLiveProp();
        this.isWatching = false;
      }
    });
  }
});

new Vue({
  el: '#app',
  components: {
    Child
  },

  template: `
    <div>
      <child :isLive="isLive"></child>
      <button @click="isLive = !isLive">Go {{ !isLive ? 'Live' : 'Offline' }}</button>
    </div>
  `,

  data() {
    return {
      isLive: false,
    }
  }
})