Show background color of layout field in panel

Kirby 3
1

Hey,

I deal with the layout fields and the blocks.
I give the layout field two values ​​- background color and width.
I would like to display the assigned background color in the panel and for the width I would like to have a small display before or after the section. I want to give each section a class when the options are selected.

blueprint:

layout:
  type: layout
  layouts:
    - "1/1"
    - "1/2, 1/2"
    - "1/3, 1/3, 1/3"
    - "1/4, 1/4, 1/4, 1/4"
    ...
settings:
tabs:
  styles:
    fields:
      fullwidth:
        type: toggle
        text:
          - "nein"
          - "ja"
      color:
        label: Hintergrundfarbe
        type: select
        options:
          - value: farbe-1
            text: Farbe 1
          - value: farbe-2
            text: Farbe 2

Unfortunately, the example from arnoson (Working on layout preview - #3 by getflourish) does not work. When setting the color, the section is expanded as follows, but the changes are not saved.

<section class="k-layout" data-selected="true" style="--layout-attrs-color: farbe-1;">

my plugin index.php

<?php

Kirby::plugin('inselzeitung/layout-preview', []);

my plugin index.js

panel.plugin("inselzeitung/layout-preview", {
  components: {
    'k-layout-field': {
      extends: 'k-layout-field',
      watch: {
        value() {
          // Update the color as soon as the layout settings are changing.
          this.setColor()
        },
      },

      mounted() {
        // Also set the color on start.
        this.setColor()
      },

      methods: {
        setColor() {
          Array.from(this.$el.querySelectorAll('.k-layout')).forEach(
            (layout, index) => {
              // Get the layout settings (attrs) for each layout.
              const layoutAttrs = this.value[index].attrs

              let { color } = layoutAttrs
              // This is only necessary because the color field I'm using might
              // store the color as an array of colors.
              color = Array.isArray(color) ? color[0] : color

              // Set a css variable on the layout so we can style it
              // individually.
              if (color) {
                layout.style.setProperty('--layout-attrs-color', color)
              } else {
                layout.style.removeProperty('--layout-attrs-color')
              }
            }
          )
        },
      },
    },
  },
})

As written above I would like to display the assigned background color in the panel and for the width I would like to have a small display before or after the section.
I think the best way would be to give each section appropriate classes and than style this classees in the index.css of the plugin.

Thank you for your help.