Panel Plugin - Savable custom sections

Kirby 3 Questions 🤔
1

I’m trying my best to learn from the docs, the kirby repo and other plugins, and bother You as little as possible, but still, Vue is a huge pain to me,…

I have a custom section, loading data and importing other components works fine so far.
I also am trying to add a multiselect field to the component but I can’t get the saving dialog to appear. I guess it’s because it’s a custom section and not a k-fields-section?

What got working so far is,
when I add a <k-fieldset> with the desired multiselect field to the component and add extends: 'k-fields-section' to the export, the saving dialog at least appears but won’t disappear until the first save, even though I revert my selection.

How can I make the save bar ‘listen’ correctly to changes of the multiselect field?

(Code shortened)

// index.js
import SomeSection from "./components/sections/stats/SomeSection.vue";

panel.plugin("Cris/SomePlugin", {
  sections: {
    somesection: SomeSection,
  }
});

SomeSection.vue:

<template>
  <k-grid >
    <k-column :width="width">
        <div class="k-widgets-section k-section">

            <header class="k-section-header">
               <!-- ... -->
            </header>

            <k-multiselect-field
              :value="value"
              :options="selectOptions"
              name="multiselect"
              type="multiselect"
              @input="onSelect"
            />

           <k-fieldset v-model="testdata" @input="input" :fields="{
               name: {
                 label: 'Your Name',
                 type: 'multiselect',
                 options: [
                   { value: 'c', text: 'CCC' },
                   { value: 'd', text: 'DDD' }
                 ]
               }
             }" />

            <Widgets :widgets="this.widgets" :status="status" />

            <footer class="k-field-footer">
                <div data-theme="help" class="k-text k-field-help" v-html="help"></div>
            </footer>

        </div>
    </k-column>
  </k-grid>
</template>

<script>
import Widgets from './Widgets.vue';
export default {

 extends: 'k-fields-section',

  components: {
    Widgets
  },

  props: {
    // Props
    headline: String,
    width: {
      type: String,
      default: 1
    },
    help: String,
    widgets: Object,
  },

  data() {
    return {
      help        : null,
      status      : null,
      widgets     : '',

      selectOptions: [
        { value: 'a', text: 'Design' },
        { value: 'b', text: 'Architecture' }
      ],

      testdata: {
        name: []
      }


    }
  },

  // When Component has been rendered, async-load Widgets
  async mounted() {
    this.status = 'isFirstLoad';
    this.isLoading = true;
    await this.loadWidgets();
  },

  methods: {
    onSelect(value) {
        console.log(value)
        this.$emit("input", value)
    },
 
    // Load all widget-data
    async loadWidgets() {
      //...
    },


  }
}

</script>

PS: This approach kinda feels weird and not right somehow… any suggestions are very welcome.
PPS: On a side note: The multiselect field is missing in the UI-Kit part of the docs