title: $emit an event from child to parent component Vue 2
body: <p>I am new to JS and Vue, so please bear with me :)</p>
  
  <p>I have a table that is rendered using two Vue components which are a parent (the table - orders) and child (the row - order).</p>
  
  <p>There is a button that can be pressed on each row of the table that carries out an AJAX against that row, but I also need to have the table (parent) refresh when the action is carried out so it has the updated data.</p>
  
  <p>I think I need to use $emit in the child to pass the action on to the parent, but I can't get it to work. Here is the code (sorry its long, I removed everything non-essential);</p>
  
  <pre><code>const order = {
      template: `
          ...// table content
          &lt;td&gt;&lt;button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
                                         selectedOption)"&gt;Set Advisor&lt;/button&gt;&lt;/td&gt;
      `,
  
      methods: {
          // following is the method that is run when the button is pressed
  
          assignAdvisor(id, selectedOption) {
              axios.post('url').then(response =&gt; {
                  ..// show response message
                  orders.$emit('refreshAfterUpdate'); // also tried  
                                                     // this.$parent.$emit(...)
              })      
      },   
  };
  
  const orders = {
      components: { order, },
  
      props: {
          orders: {
              type: Object,
          },
      },
  
      mounted() {
          // this is basically the code that I need to re-run when button is pressed,  
          // which I have repeated below in a method
          var refresh = () =&gt; {
              axios.get('/admin/ajax/unassigned-orders')
                  .then(response =&gt; {
                  this.ordersData = response.data;
                  setTimeout(refresh, 5000);
              });
          }
          refresh();
      },
  
      methods: {
          refreshAfterUpdate() {
              axios.get('/admin/ajax/unassigned-orders')
              .then(response =&gt; {
              this.ordersData = response.data;
              console.log(response);
              });
          },
      }
  };
  
  new Vue({
      render(createElement) {
          const props = {
              orders: {
                  type: Object,
              },
          };
          return createElement(orders, { props });
      },
  }).$mount('#unassignedOrders');
  </code></pre>
  
  <p>I don't get any error message or anything - it just doesn't work. </p>
  
  <p>Thanks</p>