Qsplitter output value

I have this Qsplitter:

<div class="filter-container">
        <q-splitter v-model="splitterModel">
          <template v-slot:before>
            <div>
              <q-splitter v-model="splitterModel2">
                <template v-slot:before>
                    <Buttons/>
                </template>

                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>

          <template v-slot:after>
            <div>
              <q-splitter v-model="splitterModel3">
                <template v-slot:before>
                    <Buttons/>
                </template>
                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>
        </q-splitter>
      </div>

setup() {
   const splitterModel = ref(50);
   const splitterModel2 = ref(50);
   const splitterModel3 = ref(50);
    ...
return {
splitterModel,
splitterModel2,
splitterModel3,
...

Is there any way to save the splitterModel value on mouse drag or when the splitterModel value is changed? I want to use the values later on the app.

Option 1

This can be achieved by using the splitter event @update:model-value seen in the docs here

Example

<div class="filter-container">
        <q-splitter v-model="splitterModel" @update:model-value="handleUpdate">
          <template v-slot:before>
            <div>
              <q-splitter v-model="splitterModel2">
                <template v-slot:before>
                    <Buttons/>
                </template>

                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>

          <template v-slot:after>
            <div>
              <q-splitter v-model="splitterModel3">
                <template v-slot:before>
                    <Buttons/>
                </template>
                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>
        </q-splitter>
      </div>

setup() {
   const splitterModel = ref(50);
   const splitterModel2 = ref(50);
   const splitterModel3 = ref(50);
   function handleUpdate(value) {
       // Do what you need to do with value here
       console.log(value);
   }
    ...
return {
splitterModel,
splitterModel2,
splitterModel3,
handleUpdate,
...

Option 2

Can also just set up a watcher as explained here