<template>
  <h2>Example Built-in 'component' Element</h2>
  <p>Using the component element to toggle between an ordered list (ol), and an unordered list (ul):</p>
  <button v-on:click="toggleValue = !toggleValue">Toggle</button>
  <p>Animals from around the world</p>
  <component :is="tagType">
    <li>Kiwi</li>
    <li>Jaguar</li>
    <li>Bison</li>
    <li>Snow Leopard</li>
  </component>
</template>

<script>
export default {
  data() {
    return {
      toggleValue: true
    }
  },
  computed: {
    tagType() {
      if (this.toggleValue) {
        return 'ol'
      }
      else {
        return 'ul'
      }
    }
  }
}
</script>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')