title: Vue v-for output to console.log
body: <p>The following example prints the list in HTML. The output in HTML is normal. But the output of the same list in <code>console.log</code> is duplicated. Why? I could not find an answer, but I noticed the following:  </p>
  
  <ol>
  <li>if you do not output the <code>productsCount</code> variable in the HTML, then duplication in <code>console.log</code> does not occur.  </li>
  <li>if you replace the <code>mounted</code> hook with <code>created</code>, then duplication in the <code>console.log</code> also does not occur.  </li>
  </ol>
  
  <p>I would be grateful if anyone could explain this behavior.<br>
  Vue v2.4.0</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    data: {
      products: [1, 2, 3],
      productsCount: 0
    },
    methods: {
      cell(product) {
        console.log(product);
        return product;
      }
    },
    mounted() {
      this.productsCount = this.products.length;
    }
  }).$mount('#products');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"&gt;&lt;/script&gt;
  &lt;div id="products"&gt;
    &lt;h6&gt;productsCount: {{productsCount}}&lt;/h6&gt;
    &lt;ul&gt;
      &lt;li v-for="(product, index) in products"&gt;
        &lt;span v-html="cell(product)"&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>