JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button @click="onClick">
    Change
  </button>
  <my-component :class="a" :style="{ fontWeight: b }" :value="c" data-value="here"></my-component>
</div>

CSS

.red {
  color: red;
}

JavaScript

Vue.createApp({
  components: {
    MyComponent: {
      inheritAttrs: false,
      
      template: `
        <div v-bind="splitAttrs.outer">
          Label:
          <input v-bind="splitAttrs.inner">
        </div>
      `,
      
      computed: {
        splitAttrs () {
          const attrs = this.$attrs
          const outer = {}
          const inner = {}
          
          for (const prop in attrs) {
            if (/^(class$|style$|data-)/.test(prop)) {
              outer[prop] = attrs[prop]
            } else {
              inner[prop] = attrs[prop]
            }
          }
          
          return { inner, outer }
        }
      }
    }    
  },
  
  data () {
    return {
      a: 'red',
      b: 'bold',
      c: 'Hi'
    }
  },
  
  methods: {
    onClick () {
      this.a = 'red'.replace(this.a, '')
      this.b = 'bold'.replace(this.b, '')
      this.c += '!'
    }
  }
}).mount('#app')