title: Vue.js re-render static content
body: <p>I'm new with Vue.js, and I notice some content re-render after changing any data that is not part of that content, here is an example:</p>
  
  <p><a href="https://jsfiddle.net/gustavompons/rtxqhyv2/1/" rel="nofollow noreferrer">https://jsfiddle.net/gustavompons/rtxqhyv2/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;input v-model="foo1"&gt;
      &lt;div v-html="showFoo1()"&gt;&lt;/div&gt;
      &lt;div v-html="showFoo2()"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      foo1: 'foo1',
      foo2: 'foo2'
    },
    methods: {
      showFoo1 () {
        console.log('this is ok to execute on input')
        return this.foo1
      },
      showFoo2 () {
        console.log('this should NOT execute on input')
        return this.foo2
      }
    }
  })
  </code></pre>
  
  <p>So every time I type on the input, I get "this should NOT re-render on input" in the console, which I think it's not ok because there is no reason to execute that piece of code every time.</p>
  
  <p>Is this the way Vue work or am I doing something wrong?</p>
  
  <p>I'm using vue.js v2</p>