This will fix the active tab issue

v-tabs-fix.vue

<template>
  <v-container fluid>
    <v-layout align-start justify-center>
      <v-flex xs4 class="elevation-2 ma-2">
        <v-tabs v-model="model" color="cyan" dark slider-color="yellow">
          <draggable v-model="tabs" class="v-tabs__container" @update="tabUpdate">
            <v-tab v-for="(tab, index) in tabs" :key="index" :href="`#tab-${index}`">
              {{ tab.name }}
            </v-tab>
          </draggable>
          <v-tab-item v-for="(tab, index) in tabs" :key="index" :id="`tab-${index}`">
            <v-card flat>
              <v-card-text>{{ tab.text }}</v-card-text>
            </v-card>
          </v-tab-item>
        </v-tabs>
      </v-flex>
      <v-flex xs4 class="grey lighten-3 elevation-2 pa-3">
        <pre>{{ tabs }}</pre>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "tab-work-place",
  components: {
    draggable
  },
  data() {
    return {
      model: "tab-0",
      tabs: [
        {
          name: "1st Tab",
          text: "This is a 1st tab"
        },
        {
          name: "2nd Tab",
          text: "This is a 2nd tab"
        },
        {
          name: "3rd Tab",
          text: "This is a 3rd tab"
        },
        {
          name: "4th Tab",
          text: "This is a 4th tab"
        }
      ]
    };
  },
  methods: {
    //  Converts tab-n to n as a number
    getTabNumber() {
      let tabString = this.model.slice(4, 5);
      return Number(tabString);
    },
    /*** 
      This function is called whenever there is an update
      of drag-n-drop in tabs
    */
    tabUpdate(evt) {
      let tabNumber = this.getTabNumber(); // The active tab number before udpate
      let oldIndex = evt.oldIndex; // Old index number of tab we are moving
      let newIndex = evt.newIndex; // New index number of tab we are moving
      let tabActive = null; // The new tab which can be set as active tab
      /**
       * This is description for each if condition with corresponding number
       * 1. Check if tab moved is the active one
       * 2. Check if tab moved is placed on active tab from right side
       * 3. Check if tab moved is placed on active tab from left side
       * 4. Check if tab moved to right side of active tab
       * 5. Check if tab moved to left side of active tab
       */
      if (tabNumber === oldIndex) {
        tabActive = newIndex;
      } else if (tabNumber === newIndex && tabNumber < oldIndex) {
        tabActive = tabNumber + 1;
      } else if (tabNumber === newIndex && tabNumber > oldIndex) {
        tabActive = tabNumber - 1;
      } else if (tabNumber < oldIndex) {
        tabActive = tabNumber + 1;
      } else if (tabNumber > oldIndex) {
        tabActive = tabNumber - 1;
      }

      this.model = "tab-" + tabActive;
    }
  }
};
</script>