Thank you @rstoenescu for the guidelines. I’m trying to use the router in a vuex action inside of a module. How would I transfer that part of the redirect logic in a boot file?

Both router().replace({name: 'logout'}) and router().replace({name: 'logout'}) only change the URL, but nothing more happens. The page isn’t changed, no errors are shown in the console. I have to click F5 and then things work (because the URL is changed to the right one)

With this code

  <q-select v-model="bot.exchangeApi"
                  @blur="$v.bot.exchangeApi.$touch"
                  :options="exchangeApis"
                  label="Exchange API"
                  emit-value
                  stack-label/>

    this.exchangeApis = [{
          label: 'first',
          value: 'firstVALUE'
        }]

This is OK (first is shown)

But after I select first the input is populated with firstValue

How can I make it to show first in the input, I want firstValue only in the v-model (which is so).

Tried that, but the line
router().replace({name: 'logout'}) only changes the url, without anything happening on the UI. Things work after I click F5

How can I access $router in a .js file?

Is there a build-in way to solve this problem described here (SO)?
Tl;dr: If I have

<div class="row">
<div class="col-xs-12 col-sm-3">1</div>
<div class="col-xs-12 col-sm-9">2</div>
</div>

Which on desktop I’d like to be displayed in the order
1 2

How can I make them display like this on mobile

2
1

I have this <q-table>

 <q-table
      :grid="$q.screen.xs"
      :title="showTitle ? 'Payables' : ''"
      :data="payables"
      :columns="columns"
      :visible-columns="visibleColumns"
      :rows-per-page-options="[5,10,15]"
      row-key="id"
      :pagination.sync="pagination"
      :loading="loading"
      @request="request"
    >
      <template v-slot:body-cell-from="props">
        <q-td :props="props">
          <template v-if="props.row.fromAccount">
            <router-link :to="{name:'account', params: {accountId: props.row.fromAccount.id}}">
              {{ props.row.fromAccount.name }}
            </router-link>
          </template>
          <template v-if="props.row.fromPartner">
            <router-link :to="{name: 'partner', params: {partnerId: props.row.fromPartner.id}}">
              {{ props.row.fromPartner.name}}
            </router-link>
          </template>
        </q-td>
      </template>

      <template v-slot:body-cell-to="props">
        <q-td :props="props">
          <template v-if="props.row.toAccount">
            <router-link :to="{name:'account', params: {accountId: props.row.toAccount.id}}">
              {{ props.row.toAccount.name }}
            </router-link>
          </template>
          <template v-if="props.row.toPartner">
            <router-link :to="{name: 'partner', params: {partnerId: props.row.toPartner.id}}">
              {{ props.row.toPartner.name}}
            </router-link>
          </template>
        </q-td>
      </template>
    </q-table>

columns: [
          {
            name: 'id',
            field: 'id',
            label: 'Id',
            sortable: false,
            align: 'left'
          },
          {
            name: 'orderId',
            field: 'orderId',
            label: 'Order ID',
            sortable: false,
            align: 'left',
            format: (val) => `${val.substr(0, 8)}...`
          },
          {
            name: 'from',
            field: obj => obj,
            label: 'From',
            sortable: false,
            align: 'left',
          },
          {
            name: 'to',
            field: obj => obj,
            label: 'To',
            sortable: false,
            align: 'left',
          },
          {
            name: 'fromAmount',
            field: obj => obj,
            label: 'From Amount',
            sortable: true,
            align: 'left',
            format: (val, row) => `${row.fromAmount} ${row.fromCurrency}`
          },
          {
            name: 'toAmount',
            field: obj => obj,
            label: 'To Amount',
            sortable: true,
            align: 'left',
            format: (val, row) => `${row.toAmount} ${row.toCurrency}`
          },
          {
            name: 'type',
            field: 'type',
            label: 'Type',
            align: 'left',
          },
          {
            name: 'createdAt',
            field: 'createdAt',
            label: 'Created',
            sortable: true,
            align: 'left',
            format: (val) => new Date(val).toLocaleString()
          }
        ],
        visibleColumns: ['orderId', 'from', 'to', 'fromAmount', 'toAmount', 'type', 'createdAt']

As you can see, I alter some of the columns by the format property, but for from and to I use the v-slot:body-cell-[name] slot for customization. The problem is when I activate grid, the columns which are customized using v-slot:body-cell-[name] show as undefined:

Is there a way to use the same slot for both table and grid mode? I know I can customize the whole item slot which is used for grid, but I was wondering if there’s an easier way.

I know of the hide-bottom property for <q-table>, but when I hide the pagination this way, I loose the "Data not available" which is a functionality I want. How can I hide only the pagination?

Currently in order to select a row I must click on the tick box to the left. Is there an easy way to make so that it doesn’t matter where I click in order to select a row?

Does somebody know how can I change the following DEFAULT colors:

-Clients placeholder on <q-select>
-Clients helper on <q-field>
-the down arrow in the upper-right <q-select>
-The underline on the <q-select>
-The label attribute on <q-field>