How to pass data between components and their ancestors with different state and back to Vuex.store?

Question

Vue.js

There is a component that displays a list of orders in the form of a table. Each row of the table (order) is a separate component. Inside the order component are several more components. One of them is a button component. When you click on the button, the icon lights up and a window appears in the browser window with a list of selected orders. By clicking on this window, orders are formed and printed.

Approximate location of components:

<main-component />
   <order-component />
      <order-id-component />
      <order-delivery-component />    
      <order-print-component />  
   <order-component />
    ...
   <order-component />
    ...
   <order-component />
    ...
<choosed-orders-component />

All this business works through Vuex.store
Inside there is a button. When you click on this button, the order number should be added to the Vuex.state.choosedOrders array and automatically displayed in

I don’t understand how I can do it so that when the button is pressed, the order number is added to the array in the store. Because there is no order number in the button component. Moreover, the list of orders and the list of selected orders are different data arrays.

Alternatively, you can pass the value of the order number ( ) to the component, and then pass the order number and the state (on / off) of the button to store.actions when the button is pressed. But is it right?

I hope I managed to explain. The rest is in the comments.