title: Are methods in Vue reactive?
body: <p>I've been using Vue for a while, and my experience has always been a method will recompute if its underlying reactive data is updated. I've encountered conflicting information on SO:</p>
  
  <ul>
  <li>I was attempting to answer <a href="https://stackoverflow.com/questions/59634182">this question</a>, and was told multiple times that this isn't the case.</li>
  <li>The accepted answer <a href="https://stackoverflow.com/questions/44350862">here</a> indicates that "[a method] will only be evaluated when you explicitly call it."</li>
  </ul>
  
  <p>I searched through the docs and I didn't see anything incredibly clear.</p>
  
  <p>If they are not reactive, then why does this example work?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li v-for="animal in animals" :key="animal.id"&gt;
      &lt;span v-if="isAwesome(animal)"&gt;{{ animal.name }}&lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>export default {
    data() {
      return {
        awesomeAnimalIds: [],
        animals: [
          { id: 1, name: 'dog' },
          { id: 5, name: 'cat' },
          { id: 9, name: 'fish' },
        ],
      };
    },
    created() {
      setTimeout(() =&gt; {
        this.awesomeAnimalIds.push(5);
      }, 1000);
      setTimeout(() =&gt; {
        this.awesomeAnimalIds.push(9);
      }, 2000);
    },
    methods: {
      isAwesome(animal) {
        return this.awesomeAnimalIds.includes(animal.id);
      },
    },
  };
  </code></pre>
  
  <p>I would <strong>really</strong> like to have a definitive and satisfying answer that this community can refer to.</p>