title: Bootstrap Modal Hide from VUE method
body: <p>I have a vuejs component that displays a modal dialog with a small form inside. When the form is submitted I would like to hide the Modal but cannot figure out how to do it. When submitted the form calls a method in the parent. </p>
  
  <p>Here is the component code</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div id="todoModal" class="modal fade" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title"&gt;{{ title }}&lt;/h4&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;
                &amp;times;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;form id="todoForm" @submit.prevent="$emit('save')"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="name"&gt;Todo name&lt;/label&gt;
                  &lt;input
                    id="name"
                    v-model="todo.name"
                    type="text"
                    class="form-control"
                    aria-describedby="nameHelp"
                    placeholder="Enter Todo Name"
                  /&gt;
                  &lt;small id="nameHelp" class="form-text text-muted"
                    &gt;Enter your todo's name&lt;/small
                  &gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary mr-4" type="submit" form="todoForm"&gt;
                &lt;span v-if="mode == 'create'"&gt;Create&lt;/span&gt;
                &lt;span v-if="mode == 'update'"&gt;Update&lt;/span&gt;
              &lt;/button&gt;
              &lt;button
                type="button"
                class="btn btn-danger mr-auto"
                data-dismiss="modal"
                @click="
                  $parent.showModal = false;
                  $parent.getTodos();
                "
              &gt;
                Cancel
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "CreateTodo",
    props: ["mode", "title", "todo", "showModal"],
    ref: "createTodoModal",
    mounted() {
      if (this.mode == "create") {
        this.title = "Create Todo";
      }
    },
    methods: {}
  };
  &lt;/script&gt;
  &lt;style scoped&gt;&lt;/style&gt;
  </code></pre>
  
  <p>And here is my APP.js file</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="container mt-5"&gt;
      &lt;router-view
        ref="createtodo"
        class="CreateTodo"
        name="a"
        :todo="todo"
        :title="title"
        :mode="mode"
        :show-modal="showModal"
        @save="saveTodo"
      &gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { APIService } from "./APIServices";
  const apiService = new APIService();
  
  export default {
    name: "App",
    data: function() {
      return {
        mode: "create",
        title: "Create Todo",
        todo: {},
        todos: [],
        numberOfTodos: 0,
        showModal: false
      };
    },
    mounted: function() {
      this.getTodos();
    },
  
    methods: {
      saveTodo: function() {
        if (this.mode == "create") {
          apiService.createTodo(this.todo).then(
            result =&gt; {
              if (result.status === 200) {
                this.todo = result.data;
                this.getTodos();
              }
            },
            error =&gt; {}
          );
          this.showModal = false;
          // this.$refs.createtodo.$refs.todoModal
        } else if (this.mode == "update") {
          apiService.updateTodo(this.todo).then(
            result =&gt; {
              this.getTodos();
            },
            error =&gt; {}
          );
          this.showModal = false;
        } else if (this.mode == "update") {
          apiService.updateTodo(this.todo).then(
            result =&gt; {
              this.showModal = false;
              this.getTodos();
            },
            error =&gt; {}
          );
        }
      },
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>I tried using the ref to reference the Modal from APP.js but it does not work.</p>