下のようにtemplate内で三項演算子を使用して、表示されるアイコンを切り替えたいと思っています。

<template>
  <div>
    {{ emotion ? <smile-icon /> : <bad-icon /> }}
  </div>
</template>

<script lang="ts">
import { defineComponent, SetupContext, computed } from '@vue/composition-api';

export default defineComponent({
  components: {
    SmileIcon: () =>
      import('@/assets/icons/smile.svg?inline'),
    BadIcon: () => import('@/assets/icons/bad.svg?inline'),
  },
  props: {
    emotion: {
      type: Boolean,
      required: true,
    },
  },
});
</script>

#vue