Thanks for help, I use ts, so I’ve altered @dobbel snipped to

            watch(() => context.root.$route.params.id, (first, second) => {
                strategyCode.value = first
            });

Component uses a new id without any other coding, amazing.

I have a router entry with

{path: 'strategy/net/:id', component: () => import('../')},
            {path: 'strategy/manual/:id', component: () => import('../')},

and component pointing to it with

<q-item clickable v-ripple :inset-level="level/2" :to="router" exact>

where router is variable with entries such as

/strategy/net/foo1
/strategy/manual/foo2
/strategy/manual/bar1

Component is common for all pages (it’s navigation bar)
If i click on foo2 I go to foo2 page, however I can’t go to bar1 from foo2. The url in browser location bar changes, but component is not updated. I can get to bar1 from foo1 page.
I looked into vue manual and found this page: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
Looks like it describes my issue precisely.
I use composition api and can’t figure out how can I force component to re-run setup() section and fetch data for new id. If would be nice if this behavior can be completely disabled somehow.

@dobbel You are right, it was reactivity caveat. I was able to mitigate the issue with Object.assign in dialog open function. It rewrites the whole object and changes are picked up. Not sure if this is good, but at least it works for me.

It looks like reactivity is lost even if I simply sort table with click on sortable column, i.e.

in child component

            const editOrderData = reactive({
                id: props.row.id,
                strategyId: props.strategy,
                input: {
                    type: props.row.type,
                    state: props.row.state,
                    priceStart: props.row.price,
                    lots: props.row.lots,
                    percents: props.row.percents
                }
            })

after any sort in parent, editOrderData doesn’t match props.row contents. Can anybody suggest what’s wrong here?

Hello,
this is my first experience with front end developing, so probably I do things completely wrong, but I can’t figure whats wrong, so I’m asking for help.

I have a table with data populated from graphql in one component and update dialog in another.

    <q-table dense flat hide-bottom :columns="orderColumns" :data="row"
             title-class="text-subtitle2 text-bold" :pagination.sync="pagination" row-key="id">
        <template v-slot:body="props">
            <q-tr :props="props" :class="getClassForRow(props.row.state, props.row.satisfiedLots)">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.value }}
                </q-td>
                <q-td auto-width>
                    <ManualStockOrdersMenu :strategy="strategy" :row="props.row"/>
                </q-td>
            </q-tr>
        </template>
    </q-table>

ManualStockOrdersMenu has reactive structure to hold data that can be edited

            const editOrderData = reactive({
                id: props.row.id,
                strategyId: props.strategy,
                input: {
                    type: props.row.type,
                    state: props.row.state,
                    priceStart: props.row.price,
                    lots: props.row.lots,
                    percents: props.row.percents
                }
            })

After update I fully update my table contents with

const {
                mutate: updateOrder,
                onError: onCreateError,
                onDone: onCreateDone,
            } = useMutation(updateManualStockStrategyOrder, {
                variables: editOrderData,
                refetchQueries: [{query: getManualStockStrategyData, variables: {strategyId: props.strategy}}]
            })

Table sorts rows by update time, so after edit, row order changes. If I try to edit the same row, editOrderData data points to row that was in this place before. So, with my code, I can reliably edit only this last row in my table (order doesn’t change in this case).

It is extremely complex to me to provide playground, illustrating the issue, but maybe the issue is obvious?

I tried to throw away editOrderData structure and map dialog directly to props.row, however in this case I have an issue with updateOrder mutation variables: values don’t change at all (however, local edits are reflected on screen).

                variables: {id: props.row.id, strategyId: props.strategy, input: {type: props.row.type, state: props.row.state, priceStart: props.row.price, lots: props.row.lots, percents: props.row.percents}}, <- props.row contains always contain unmodified values