TypeError: Cannot read property '0' of undefined VueJS

I am seeing a strange issue with VueJS and HTML un/ordered list elements. All files build in my project without any errors but in browser you see nothing on the page and there is an error in browser Console.

I have a fix (see below code), but am curious as to why VueJS throws this error and how VueJS handles basic list elements in the browser? So I was hoping someone could explain this issue to me to fully understand what is really happening here.

I'm using Visual Studio 2019 with Snowpack to compile

My html/template code:

<!-- The code that throws error in the browser -->
<ul>
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
</ul>

<!-- This code fixes error in browser -->
<ul :key="someRandomKey"> <!--<ul v-bind:id="someRandomKey"> also a fix-->
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
</ul>

My Vue Component ts code:

import { Component, Prop, Vue } from '/web_modules/vue-property-decorator.js'

import vevraTemplate from '../templates/applyVEVRAA.vue.js';
@Component({ render: vevraTemplate, watch: null })
export default class VEVRAAComponent extends Vue
{
    
}

The error: (My vue component name is 'applyVEVRAA.vue.js')