title: Why can't vue find variable in loop?
body: <p>I'm struggling to develop a simple component and use it inside a loop:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template id="measurement"&gt;
      &lt;tr class="d-flex"&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>Vue.component('measurement', {
      template: '#measurement',
      props: {
          name: String,
          data: Object,
          val: String,
      },
  });
  </code></pre>
  
  <p>This is obviously not functional yet but already fails:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table v-for="(m, idx) in sortedMeters"&gt;
      &lt;measurement v-bind:data="m"&gt;&lt;/measurement&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>gives <code>ReferenceError: Can't find variable: m</code> inside view. For a strange reason the same thing works, i.e. without error, in a paragraph:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p v-for="(m, idx) in sortedMeters"&gt;
      &lt;measurement v-bind:data="m"&gt;&lt;/measurement&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>What causes the variable to be not found?</p>
  
  <p>PS.: here's a fiddle: <a href="https://jsfiddle.net/andig2/u47gh3w1/" rel="nofollow noreferrer">https://jsfiddle.net/andig2/u47gh3w1/</a>. It shows a different error as soon as the <code>table</code> is included.</p>
  
  <p><strong>Update</strong> It is intended that the loop produces multiple tables. Rows per table will be created by multiple <code>measurement</code>s</p>