vuejs undefined value when switching template - vue.js

Question

I'm porting a list to a table to further expand out the columns in the future, but I'm running into an undefined variable error, which I don't understand.
Here's the existing list:
<ul class="collection with-header">
<li class="collection-item" v-for="day in days">
<drop #drop="function(data, event) { handleDrop(data, day, event); }">
<div>{{ day.getLabel() }}</div>
<drag class="chip" v-for="meal in day.meals">{{ meal.title }}<i class="close material-icons" v-on:click="deleteMeal(meal)">close</i></drag>
</drop>
</li>
</ul>
And here's the new table:
<table>
<tr class="collection-item" v-for="day in days">
<td>{{ day.getLabel() }}</td>
<drop #drop="function(data, event) { handleDrop(data, day, event); }" tag="td">
<drag class="chip" v-for="meal in day.meals">{{ meal.title }}<i class="close material-icons" v-on:click="deleteMeal(meal)">close</i></drag>
</drop>
</tr>
</table>
When running the code, I get a "day is not defined" error, which seems to occur on the drag line as commenting it out fixes the error. What I don't understand is why that variable isn't defined. In both an element has access to the day object to get its label, but in the drop tag, which is identical in both examples, the day object is now out of scope.
Is there something about tables specifically that is causing a problem here?

Answer 1

The problem is that the replacement of the component tag with the tag passed to it in the props occurs after the template is transformed into DOM. And in the case of a table, tags that are not allowed to be inside the table are transferred to the DOM before the table:
new Vue({
el: "#app"
})
table {
border: 4px solid green;
}
td {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr>
<td>First column</td>
<component :is="'td'" tag="td">Second column</component>
<td>Third column</td>
</tr>
</table>
</div>
And, accordingly, there will be no variable day in tr scope. So do not use in this case the attribute tag:
<table>
<tr class="collection-item" v-for="day in days">
<td>{{ day.label }}</td>
<td>
<drop #drop="function(data, event) { handleDrop(data, day, event); }">
<drag class="chip" v-for="meal in day.meals">{{ meal.title }}
<i class="close material-icons" v-on:click="deleteMeal(meal)">x</i>
</drag>
</drop>
</td>
</tr>
</table>