Vue warn]: Failed to resolve component: v-template
If this is a native custom element, make sure to exclude it from component resolution
via compilerOptions.isCustomElement.
at <Home>

{
  "name": "example-app-vue3",
  "main": "src/app.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~8.5.0",
    "nativescript-vue": "3.0.0-beta.7"
  },
  "devDependencies": {
    "@nativescript/ios": "8.5.1",
    "@nativescript/tailwind": "^2.0.1",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.0",
    "@types/node": "~17.0.21",
    "tailwindcss": "^3.1.8",
    "typescript": "~4.9.5"
  }
}

<template>
  <Frame>
    <Page>
      <ActionBar>
        <Label text="Home" class="font-bold text-lg" />
      </ActionBar>

      <GridLayout rows="20, auto, auto, *" class="px-4">
        <Label row="1" class="text-xl align-middle text-center text-gray-500" :text="message" @tap="logMessage" />

        <Button row="2" @tap="$navigateTo(Details)" class="mt-4 px-4 py-2 bg-white border-2 border-blue-400 rounded-lg"
          horizontalAlignment="center">
          View Details
        </Button>
        <ListView row="3" for="location in tmpLocations">
          <v-template>
            <Label :text="location.name"></Label>
          </v-template>
        </ListView>
      </GridLayout>
    </Page>
  </Frame>
</template>

<script lang="ts" setup>
import {
  ref,
  computed,
  onMounted,
  onUnmounted,
  $navigateTo,
} from 'nativescript-vue';
import Details from './Details.vue';

const counter = ref(0);
const message = computed(() => {
  return `Blank {N}-Vue app: ${counter.value}`;
});

const tmpLocations = computed(() => {
  let locations = [];
  for (let i = 0; i < 5; i++) {
    locations.push({
      name: `location ${i}`,
    });
  }
  console.log(`Home/tmpLocations, locations`, locations);
  return locations;
});


function logMessage() {
  console.log('You have tapped the message!');
}

let interval: any;
onMounted(() => {
  console.log('mounted');
  interval = setInterval(() => counter.value++, 100);
});

onUnmounted(() => {
  console.log('unmounted');
  clearInterval(interval);
});
</script>

<style>
/* .info {
    font-size: 20;
  } */
</style>