Property was accessed during render but is not defined on instance

Question

When I access the desserts variable in v-table I get the above warning which causes an error that prevents the table from rendering.

However, when I change the v-table to the native table, the table renders without any issues.

Link to codepen

The HTML (Vue 3 and Vuetify 3 linked via CDN):

<div id="app">
  <v-table>
    <thead>
      <tr>
        <th class="text-left">
          Name
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in desserts" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </v-table>
</div>

The JavaScript:

const { createApp } = Vue; // Vue.js

// Vuetify
const { createVuetify } = Vuetify;
const vuetify = createVuetify();

// Create Vue.js application
const app = createApp({
  data() {
    return {
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          name: 'Eclair',
          calories: 262,
        },
        {
          name: 'Cupcake',
          calories: 305,
        },
        {
          name: 'Gingerbread',
          calories: 356,
        },
        {
          name: 'Jelly bean',
          calories: 375,
        },
        {
          name: 'Lollipop',
          calories: 392,
        },
        {
          name: 'Honeycomb',
          calories: 408,
        },
        {
          name: 'Donut',
          calories: 452,
        },
        {
          name: 'KitKat',
          calories: 518,
        },
      ],
    }
  },
});

// Mount Vue.js application, use Vuetify
app.use(vuetify).mount('#app');

// Configure Vue.js error handling
app.config.errorHandler = (err, instance, info) => {
  // Report error to tracking services
  console.error(err);
  console.log(instance);
  console.info(info);
}

Answer 1

https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

The browser removes thead, tbody, tr, th, and td elements if they aren't in a table, so vue only sees

<v-table>
    
      
        
          Name
        
        
          Calories
        
      
    
    
      
        {{ item.name }}
        {{ item.calories }}
      
    
  </v-table>

You won't have this problem if you use .vue files or <script type="text/x-template">