Making columns a computed property should do the trick

Man, that sounds serious Thank you for telling us.
I hope he takes as much time as he needs so that he gets well soon!

With “select all icon” you mean the checkbox in the table head that appears when you set selection="multiple" on the QTable, right?
I don’t know how to modify that, but you could use an external button and set the selected property to your whole table data array.

<q-table
    :data="tableData"
    selection="multiple"
    :selected.sync="selected"
    ....
</q-table>

<q-btn label="click me" @click="buttonClicked" />

{
    buttonClicked() {
        this.selected = this.tableData;
    }
}

You are right, there is indeed not much difference at for this animation duration.

I have now tried out a few options and I came to the conclusion that it definitely should be easeOutCubic (see https://easings.net/de#easeOutCubic ). At least in my opinion.

I have made a little demonstration: https://jsfiddle.net/uvz4gam3/ (don’t look at the code; only consider the result window)
There you can see (when you switch the tabs) some different easing curves:

• The red one is the original (before your commit)
• The orange one is the change you have made (looks the same)
• And the blue one is the one I think looks the best

If you would change the default transition to that, I would be super happy

Does it work? What @jraez said should help.

If you really want to use the router, you can do that, too.
The code you showed is in a boot file, right? So I think your this.$router.push('/login') call doesn’t work because this.$router is not defined. Normally, you write that in a Vue component, where this refers to the component - but you are in a boot file.

This is how you can do it:

import axios from "axios"

export default ({ Vue, router }) => { // <-------- This is where the `router` comes from
  Vue.prototype.$axios = axios;

  // ... (your request interceptor here)

  axios.interceptors.response.use(response => {
    return response;
  }, error => {
    if (error.response.status === 401) {
      // ...
      router.push("/login"); // <----  note there is no `this`
    }
    // ...
  });
}

This is not a problem with QTable, but with Vue’s reactivity system.
Its a common pitfall and thankfully this will be improved when Vue 3.0 comes out (I think).

You can read about it here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

The example in the link deals with exactly your problem: You initialize your objects in this.prefixes as objects having the properties timelines and prefix, so they are reactive automatically (that is Vue sets up it’s change-detection-system for them).
Then you assign a new property rpki using this.prefixes[key].rpki = '1' – this is not reactive in Vue 2.x !! So when you change that property later, Vue doesn’t notice it.

One way to solve your problem is by explicitly telling Vue that your objects have a new property. For this, Vue provides an alternative way of assigning values to object properties:

In refreshAPwidget(), replace

this.prefixes[key].rpki = '1'

with:

this.$set(this.prefixes[key], 'rpki', '1')

On a similar note, it is better to write this.$delete(this.prefixes[key], 'timelines') instead of delete this.prefixes[key].timelines, but this doesn’t affect your example.

The columns object doesn’t need to be static.
You can always modify it or generate it dynamically, for example as a computed property.

Maybe this will give you an idea:

computed: {
  columns() {
    return this.columnNamesFromCsv.map(columnName => {
      return {
        name: columnName,
        label: columnName,
        align: "left",
        sortable: true,
        field: row => row[columnName]
      };
    });
  }
}

Note that the field attribute is a function to extract the cell value from the row.

I’m assuming you parse the CSV into a Javascript object.
This all depends on how your data looks, of course.

Yes. If you write your options array as a computed property, you can do this:

computed: {
    options() {
        return [
            { label: 'Google', value: 'GOOGLE' },
            { label: 'Facebook', value: 'FACEBOOK' },
            { label: 'Twitter', value: 'TWITTER' },
            { label: 'Apple', value: 'APPLE', disable: this.selected === 'GOOGLE' },
            { label: 'Oracle', value: 'ORACLE' }
        ];
    }
}

You could add rows="1000" (or another large number) to the q-input.
It is not exactly 100%, but it’s 100% with a maximum number of rows. I think that’s ok because a text-area with this many lines doesn’t make much sense anyways.

Seems a bit like a hack, though… so I don’t know if some browsers maybe handle this differently. Maybe it would be wise to set overflow: hidden on the container as well - just to be safe.