use vue to enable disable record in blade template

I am brand new to vue js.

I have a blade view that returns a list of modules, one of the columns has a button that will enable or disable the module via an ajax call.

I would like to use VUE js to achieve this.

This is what I have so far

<div class="content">
   <table id="moduleTable">
      <tr>
         <th>Module Name</th>
         <th>Status</th>
         <th>Update</th>
      </tr>
      @foreach($modules as $module)
      <tr>
         <td ></td>
         @if($module->enabled())
         <td>Enabled</td>
         <td><button @click="toggleModule('')" >Disable</button></td>
         @else
         <td>Disabled</td>
         <td><button @click="toggleModule('')">Enable</button></td>
         @endif
      </tr>
      @endforeach
   </table>
</div>

and this is what I have for my js

var buttons = new Vue({
    el: '#moduleTable',
    data:  {}
    ,
    methods: {
        toggleModule: function (moduleName) {
                console.log(moduleName);
        }
    }
});

But now I am not sure what to do next (I understand the axios bit to make the call).

I want to be able to toggle the the text of the button enable/disable, so how do I get a reference to the button that has been clicked?

Also am I passing the module value to the click event correctly or is there a better way?

via Chebli Mohamed