title: The API request from the Vuejs component is executed twice
body: <p>I am creating To-do Application using Vuejs, Expressjs, and Mongodb.</p>
  
  <p>I have already written through the New Component with a separate link. This is normal, but I am currently using the New Component by importing it into the Root Component without any additional links.</p>
  
  <p>This works, but the API request is executed twice. (Two articles are written.)</p>
  
  <p>I just imported the component, what's the problem?</p>
  
  <p>I have only sent one request but strangely two responses are flying. (id is different, title and content are the same.)</p>
  
  <p><strong>frontend/components/TodoForm.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;form @submit.prevent="create"&gt;
        title : &lt;input v-model="todo.title"&gt;
        content : &lt;input v-model="todo.content"&gt;
        &lt;button v-on:click="create" &gt;Create&lt;/button&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    data: function () {
      return {
        todo: {}
      }
    },
    methods: {
      create: function() {
        this.$http.post('/api/todos/create', this.todo)
        .then(
          (response) =&gt; {
            console.log(response.data)
            this.$router.push({name: 'Todo', params: { id: response.data._id }})
          },
          (err) =&gt; {
            alert('Error')
          }
        )
        .catch(function (error) {
          alert('error')
        })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>fromtend/components/TodoList.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;todo-form/&gt;
  
    &lt;div class="todos"&gt;
      &lt;h1&gt;Todos&lt;/h1&gt;
      &lt;div v-for="todo in todos" v-bind:key="todo" class="todo"&gt;
        &lt;div&gt;
          &lt;strong&gt;{{todo.title}}&lt;/strong&gt;
          &lt;router-link :to="{ name: 'Todo', params: { id: todo._id }}"&gt;detail&lt;/router-link&gt;
          &lt;router-link :to="{ name: 'Edit', params: { id: todo._id }}"&gt;edit&lt;/router-link&gt;
          &lt;button type="submit" @click="deleteTodo(todo._id)"&gt;Delete&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import TodoForm from './TodoForm';
  
  export default {
    data () {
      return {
        todos: {}
      }
    },
    created () {
      this.$http.get('/api/todos')
      .then((response) =&gt; {
        this.todos= response.data
      })
    },
    components: {
      TodoForm
    },
    methods: {
      deleteTodo (id) {
        const targetIndex = this.todos.findIndex(v =&gt; v._id === id)
        this.$http.delete(`/api/todos/${id}`)
        .then((response) =&gt; {
          this.todos.splice(targetIndex, 1)
        })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>backend/api</strong></p>
  
  <pre><code>router.post ('/create', (req, res) =&gt; {
    let todo = new Todo({
      title: req.body.title || req.body.todo.title,
      content: req.body.content || req.body.todo.content
    });
  
    todo.save((err) =&gt; {
      if (err) {
        res.status(500).send('Something broke!');
      }
      res.json(todo)
    });
  });
  </code></pre>