JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.17/vuetify.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-checkbox
          v-model="selectAllRequired"
          class="not-so-isolated">
          <template v-slot:label>
            <button
              style="width: 100%; text-align: left"
              @click="changeOrder">
              <v-img
                max-width="14px"
                class="image list-sort-icon"
                src="https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg"></v-img>
              <span class="list-title">ROLA</span>
          </button>
          </template>
        </v-checkbox>
      </v-container>
    </v-main>
  </v-app>
</div>

JavaScript

new Vue({
	el: '#app',
	vuetify: new Vuetify(),
  data() {
  	return {
    	selectAllRequired: false
    }
  },
  methods: {
  	changeOrder(e) {
    	e.preventDefault()
    	e.stopPropagation()
    	console.log('changeOrder')
    }
  }
})