title: How to tell if a Vue component is active or not
body: <p>I have a Vue component that is wrapped in a <code>&lt;keep-alive&gt;</code> tag to prevent re-rendering.</p>
  <p>Within the component, I want to react to some change in global data by firing a method. But, I only want to fire the method if the component is currently active.</p>
  <p>Right now, I'm doing something like this:</p>
  <pre><code>export default {
    data() {
      return { 
        globalVar: this.$store.state.var,
        isComponentActive: false,
      };
    },
    methods: {
      foo() { console.log('foo') };
    },
    watch: {
      globalVar() {
        if (this.isComponentActive) {
          this.foo();
        }
      },
    },
    activated() {
      this.isComponentActive = true;
    },
    deactivated() {
      this.isComponentActive = false;
    },
  }
    
  </code></pre>
  <p>But I was hoping there was already a property of the component's instance that I could reference. Something like this:</p>
  <pre><code>export default {
    data() {
      return { globalVar: this.$store.state.var };
    },
    methods: {
      foo() { console.log('foo') };
    },
    watch: {
      globalVar() {
        if (this.$isComponentActive) {
          this.foo();
        }
      },
    },
  }
  </code></pre>
  <p>I can't find anything like that in <a href="https://v2.vuejs.org/v2/api/#keep-alive" rel="nofollow noreferrer">the documentation for the <code>&lt;keep-alive&gt;</code> tag</a>. And, looking at the Vue instance, it doesn't appear to have a property for it. But, does anyone know of a way I could get the &quot;activated&quot; state of the Vue instance without having to maintain it myself through the hooks?</p>