[Vuejs]-How do I get my v-show to display a component in Vue JS

I was able to fix the problem by placing the component inside a div tag and moving the v-show on the parent div. Here’s a adjusted code:

<div v-show="isMoe">
  <Moe />
</div>
<Larry />
<Curly />



import Moe from "@/components/Moe.vue";
import Larry from "@/components/Larry.vue";
import Curly from "@/components/Curly.vue";

export default {
  data: function() {
    return {
      stooge: "Curly"
    }
  },
  components: {
    Moe,
    Larry,
    Curly
  },
  computed: {
    isMoe() {
      return this.stooge === "Moe"
    }
  }
}

Maybe it’s a terminology issue, but v-show will always render a component. It will simply add a style="display: none;" style and toggle that to block.

Your code looks correct so it should behave as expected. Is it not adding the style="display: none;" when v-show is false?

As an additional note. It is better practice to use === instead of ==:

return this.stooge === "Moe"