How to toggle a class based on a variable passed from Laravel using a Vuejs component

This is the 3rd attempt for me to get some help on this issue, for so long I've been trying to toggle an id using Vuejs, I just want that id to change based on a boolean value passed on from Laravel, I managed to do it without components but I ran into a problem, there's multiple buttons on the page, when one gets their id updated the others do as well, so I thought maybe a component could solve this, I just can't get it to work.

Here's the blade template, this is inside a table inside a foreach loop that has access to a $courses variable:

courses.blade:

<form method="POST" action="" id="form-submit">
                       
    @if ($course->pivot->completed == true)
    <course-buttons id="this.greenClass.aClass">Done</course-buttons>
    @else
    <course-buttons id="this.redClass.aClass">Not Yet</course-buttons>
    @endif
</form>

this is app.js:

require('./bootstrap');
Vue.component('course-buttons', require('./components/course-buttons.vue'))

var vm = new Vue({
el: '#app'
});

And this is the course-buttons.vue file:

<template>

  <button @click.prevent="onSubmit()" type="button" class="btn btn-sm" :id=id><slot></slot></button>

</template>

<script>
  export default {
    props: ['id'],
    data: function() {
      return {
        greenClass: {aClass: 'coursetrue', text: 'Done!'},
        redClass: {aClass: 'coursefalse', text: 'Not Yet!'}
      };
    },
    methods: {
      onSubmit: function(course) {
        axios.post('/MyCourses/' + course.name)
           .then(function (response){
             console.log(response.data.course.pivot.completed)

             if (response.data.course.pivot.completed == true){
               return [
                 vm.redClass.aClass = 'coursetrue',
                 vm.redClass.text = 'Done!',
                 vm.greenClass.aClass = 'coursetrue',
                 vm.greenClass.text = 'Done!'
               ]
             } else {
               return [
                 vm.greenClass.aClass = 'coursefalse',
                 vm.greenClass.text = 'Not Yet',
                 vm.redClass.aClass = 'coursefalse',
                 vm.redClass.text = 'Not Yet'
               ]
             }
           });
     }
    }
  }
</script>

First I know that my code isn't good, that's why I asked for help many times but with no answers at all, so if you have any tips that might help me get this code cleaner, even change it totally but just get the job done, I'm all ears.

The errors I'm getting right now is first the @click.prevent is an invalid expression, tried moving that to the tag, it doesn't do anything over there so I had that going before and now I lost it as well, also I get an error that the id is not defined on the instance, although I defined the props and data in the vue component. if you're wondering why do I even assign the id on the tag itself and not the component, it's because of how my code is structured,e.g "If the value is true then load the tag with that id, otherwise load it with that id", once again if you can help me do this in a completely different way I'll be grateful.

via Omar Tarek