Using <component> tag as first child in Vue <template> tag in Vue 2

Question

In Vue,js 2, I would like to use this pattern:

<template>
  <component :is="tagType">
    ...
  </component>
</template>

Where tagType is a generic computed property as follow:

get tagType() {
  return condition ? 'li': 'MyBestComponent'
}

Is this a valid approach? Would you suggest any other pattern to achieve the same result?

Answer 1

use computed property or just a conditional in the template

<component :is="tagType">
...
computed:{
  tagType(){
    return condition ? LIComponent : MyBestComponent
  }
}

<li v-if='condition'>testing</li>
<MyBestComponent v-else />