ExampleButton.vue

<template>
  <div>
    <Button>{{ text }}</Button>
  <div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    }
  }
}
</script>

ExamplePage.vue

<template>
  <div>
    <h1>Welcome</h1>
    <ExampleButton :text="buttonText" />
  <div>
</template>

<script>
export default {
  data () {
    return {
      buttonText: "Say Hello"
    }
  }
}
</script>

InheritedExampleButton.vue

<template>
  <div>
    <Button v-bind="$attrs">{{ text }}</Button>
  <div>
</template>

<script>
export default {
  inheritedAttrs: false,
  props: {
    text: {
      type: String,
      default: ""
    }
  }
}
</script>

InheritedExamplePage.vue

<template>
  <div>
    <h1>Welcome</h1>
    <ExampleButton name="example-button" :text="buttonText" />
  <div>
</template>

<script>
import ExampleButton from './ExampleButton';
export default {
  components: {
    ExampleButton
  },
  data () {
    return {
      buttonText: "Say Hello"
    }
  }
}
</script>

WrongInheritedExampleButton.vue

<template>
  <div>
    <Button>{{ text }}</Button>
  <div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    }
  }
}
</script>