title: watch computed properties in vuejs
body: <p>I am trying to watch my computed property <code>isEllipsisActive()</code> to see if the value is true or false and then I would like to set <code>shouldShowArrow</code> to this value.</p>
  <p>The value will changed when the user resizes their browser based on the condition <code>this.wrap.scrollHeight &lt; this.h1.scrollHeight;</code>,</p>
  <p>Currently it works but only if I refresh the browser, I need it to update when value changes.
  How can I watch if the value of <code>isEllipsisActive()</code> changes?</p>
  <pre><code>export default {
    data() {
      return { 
        h1: null,
        wrap: null,
        shouldShowArrow: false,
      };
    },
      isEllipsisActive() {
        if (!this.wrap &amp;&amp; !this.h1) {
          console.log(&quot;Not initialized&quot;, 'not initalized');
          return false;
        }
        return this.wrap.scrollHeight &lt; this.h1.scrollHeight;
      },
    },
    mounted() {
      this.$nextTick(() =&gt; {
        this.h1 = this.$refs.h1;
        this.wrap = this.$refs.wrap;
      });
    },
    watch: {
      isEllipsisActive(newValue) {
        this.h1 !== null &amp;&amp; console.log('changed')
      },
    },
  };
  </code></pre>