Why can't Vue find the variable in the loop?

Question

I'm trying to develop a simple component and use it in a loop:

<template id="measurement">
    <tr class="d-flex">
    </tr>
</template>

Vue.component('measurement', {
    template: '#measurement',
    props: {
        name: String,
        data: Object,
        val: String,
    },
});

This obviously doesn't work yet, but it has failed:

<table v-for="(m, idx) in sortedMeters">
    <measurement v-bind:data="m"></measurement>
</table>

gives ReferenceError: Variable not found in view: m. For a strange reason the same thing works in paragraphs, i.e. there are no errors:

<p v-for="(m, idx) in sortedMeters">
    <measurement v-bind:data="m"></measurement>
</p>

What causes the variable to not be found?

PS: This is a fiddle: https://jsfiddle.net/andig2/u47gh3w1/. Once table is included a different error is displayed.

Update The purpose of the loop is to generate multiple tables. The number of rows in each table will be created by multiple measurement

Answer 1

If replaced

and

You will end up with working code.

But you will most likely want to use

or

Answer 2

TLDR: Before Vue passes the DOM template, the browser will <measurement v-bind:name="i" v-bind:data="m"> Promoted outside of <table> (outside the v-for context), causing an error in Vue. This is a known warning of DOM template parsing.

---

The HTML specification requires that <table> contain only certain child elements :

• <script> or