Question: Not sure if it's an update or something but I have have 2 F4 instances running on the standard environment(java app) at the moment.Now I haven't done one single request in the past 12hrs but my frontend instance usage is at 64.02hrs for today !! I thought the usage only increases when requests are being done. Did something change ? I'm still on the 1 year free tier(I have about 90 days left)

![screenshot](https://i.stack.imgur.com/6lYjc.png)

Content of my config file : 

```
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <runtime>java8</runtime>
  <threadsafe>true</threadsafe>
  <instance-class>F4</instance-class>
  <automatic-scaling>
    <min-instances>1</min-instances>
   <max-instances>3</max-instances>
   <min-idle-instances>1</min-idle-instances>
  </automatic-scaling>
  <env-variables>
    <env-var name="BUCKET_NAME" value="sydro_business_images" />
  </env-variables>
</appengine-web-app>

```

Answer: 
Link to working [pen](https://codepen.io/ParaBolt/pen/rNaVMPv).

Note the key parts of the code :-

```html
<v-tabs :value="currentTab" @change="onTabChange">
      <v-tab v-for="(tab, i) in tabs" :key="i">{{tab.title}}</v-tab>
</v-tabs>

```

```js
async onTabChange(clickedTab)
{
    this.currentTab = clickedTab;
    await this.$nextTick();
    if (!this.allowTabChange) this.currentTab = this.previousTab;
    else this.previousTab = this.currentTab;
}

```

`v-tabs` component uses an internal model to maintain it's state i.e. which tab is currently active. Using the `:value` attribute, we can set an initial active tab. When the user clicks on a different tab, the internal model is updated leading to the clicked tab getting highlighted. `v-tabs` also emits a change event to notify the parent component of this change. We need to listen for this event and manage the `:value` variable by ourselves to maintain state in the parent. Since `v-model` is an abstraction over `:value` and `@change`, we could use that as well.

To listen for this change event, add `@change` to `v-tabs`. You can shift the entire logic that you have at `@click` to `@change` resulting in a cleaner code.

To prevent selection of the next tab, we need to use some tricky code since the internal model of `v-tabs` is not accessible to us. We need to allow `currentTab` to change temporarily to the clicked tab and then we reset it to `previousTab` in `$nextTick` i.e. after the current batch of updates has been picked up by Vue. The highlight beneath the tabs itself occurs after `$nextTick` so it will not change since we have reset the `:value` to `previousTab` by then.

If you are ok with letting the highlight temporarily shift to the new tab, then all you need to do is update `currentTab` to the index of next tab and the highlight will shift over as normal. Then depending on the decision made by user, you can set `currentTab` to `previousTab` to revert the change or you can update `previousTab` with the new value of `currentTab` i.e. the next tab. In this case the `$nextTick` hack is unnecessary.
Thanks to the answer by @ParaBolt and his CodePen, I got this working. My answer differed slightly from his because my `currentTab` is stored in state, not the component, and I also used a `filter` method to get the `component` value, but the structure is the same. 

Here are the important parts of the mixin:

```
 data: () => ({
    ..
    previousTab: '',
  }),
  methods: {
    ...mapActions('app', ['setUnsaved']),
    async tabChange(newTab) {
      this.setCurrentTab(newTab);
      // We need to get the corresponding component value from the tabs array.
      const newComponent = this.tabList.filter(tab => tab.link === newTab)[0].component;
      // Stash these in case we need then in unsavedModalConfirm()
      this.destTabComponent = newComponent;
      this.destTabLink = newTab;
      // Check to see if getUnsaved === true; if it is,
      // set variable to display warning modal.
      await this.$nextTick();
      if (this.getUnsaved) {
        this.setCurrentTab(this.previousTab);
        this.showUnsaved = true;
      } else {
        // There is no unsaved content, so continue to the desired tab.
        this.setCurrentTab(newTab);
        this.$router.push({ name: newComponent });
      }
    },
    unsavedModalConfirm(confirm) {
      if (confirm) {
        // User selected Continue from modal.
        this.setCurrentTab(this.destTabLink);
        this.$router.push({ name: this.destTabComponent });
        this.setUnsaved(false);
      } else {
        // User selected Cancel
        this.setCurrentTab(this.previousTab);
      }
      this.showUnsaved = false;
    },
  },
  mounted() {
    this.previousTab = this.currentTab;
  },

```

Whenever I cancel from the modal, it just stays where it is, and if I choose to continue, it goes on to the desired tab.