Условный рендеринг VueJs v-if не работает

Можете ли вы помочь мне понять, что происходит, когда я пытаюсь использовать v-if и props?

Я создал модальный компонент, и внутри этого модального компонента у меня есть несколько модальных окон, и я использую Zurb Foundation Reveal, чтобы показать свое модальное окно. Я использую директиву v-if для отображения нужного мне модального окна.

Вот мой код:

Модальный компонент

<template>
  <div>
    <div v-if = "type === 'loading'" id = "modal-1"></div>
    <div v-if = "type === 'success'" id = "modal-1"></div>
    <div v-if = "type === 'error'" id = "modal-1"></div>
  </div>
</template>
<script lang = "ts">
import { Component, Prop, Vue } from "vue-property-decorator"

export default class MyModal extends Vue {
  @Prop(string) type
}

Родительский компонент

<template>
  <div>
    <my-modal :type = "type"></my-modal>
    <button @click = "myMethod()">Click Me</button>
  </div>
</template>
<script lang = "ts">
import { Component, Vue } from "vue-property-decorator"
import MyModal from "../my-modal.vue"

@Component({
  components: { MyModal }
})
export default class ParentComponent extends Vue {
  type: string = ""
  myMethod() {
    let modal = new Foundation.Reveal($("#modal-1"))

    this.type = "loading"
    modal.open()

  }
}
</script>