SOURCE

Vue.component('base-input', {
    inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
        <slot :user="user" :user1="user.firstName"></slot>
    </label>
  `,
  data(){
      return{
          user:{
              firstName:'fff',
              lastName:'lll'
          }
      }
  },
  mounted(){
      console.log(this.$attrs)
  }
})
var app = new Vue(
    {
        el:'#app',
        data:{
            msg:'aa',
            myStyleObject:{
                height:'100px',
                width:'100px',
                'background-color':'red',
                'backgroundColor':'blue'
            },
            message:''
        },
        mounted:function(){
            this.msg='<div style="color:red;">aaa</div>'
           
        },
        computed:{
            a(){
                return 2*b
            },
            b(){
                return 2*a
            }
        }
    }
)

<div id="app">
   <div v-html="msg">aaaaa</div> 
   <div :style="myStyleObject"></div>
   <span>Multiline message is:</span>
<p style="white-space: pre-wrap;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<base-input title="My journey witqh Vue"  placeholder='Enter your username'><template v-slot:default="slotProps">{{slotProps}}</template></base-input>
</div>