[Vuejs]-Getting Vue.js to hide and switch css class synchronously

I do not really understand what you are trying to do.
But i would use a computed properties instead.

computed: {
   classSwitch() {
      if (this.step == 6) {
          return "col-10";
      }
      return "col-8";
   },
   showImage() {
      if (this.step == 6) {
          return false;
      }
      return true;
   }
}

If you go with the approach above you should remove the variables from data object

Another simple approach would be having just one computed property for showing the image and one inline class binding.
The data section can be removed since it’s variables arent used.

<div :class="{ 'col-10': step === 6, 'col-8': step !== 6}">
 Content of my div here
</div>
<div v-if="showImage" class="col-4">
  Another div here
</div>

computed: {
showImage() {
      if (this.step == 6) {
          return false;
      }
      return true;
   }
}