Bar extends Foo , I want to render Bar with Foo template， but nothing displayed.

Foo.vue

<template>
  <div>{{ val }}</div>
</template>

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

Bar.vue

<script>
import Foo from "./Foo.vue";

export default {
  extends: Foo,
  props: {
    val: {type: String, default: "bar"}
  },
}
</script>