Why is Vue putting my element body in an attribute?

Question

This is my template for "Guess":

<template>
  <div :name="label">
    Kevin was here:{{ value }}
  </div>
</template>

But the produced HTML looks like this actual output:

<div label="guess-0" value="Kevin"> Kevin was here:</div>

Expected output:

<div label="guess-0"> Kevin was here: Kevin</div>

Here's how I'm using the template:

data: () => ({
  guesses: [
    "Kevin",
    "Apple",
    "",
    "",
    "",
    "",
  ]
}),

<Guess
  v-for="(guess, i) in guesses"
  :key="`guess-${i}`"
  :label="`guess-${i}`"
  :value="guess"
/>

Answer 1

A commenter asked if I'd registered the Guess component. I had not. Thank you.

This fixed it:

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        label: {
            type: String,
        },
        value: {
            type: String,
        },
    },
});
</script>