子コンポーネントでv-modelを使う時の挙動について

前提・実現したいこと

双方向データバインディングの学習中に起こった挙動がどういう仕組みなのか理解できなかったので、質問させていただきました。

http://www.fumiononaka.com/Business/html5/FN1811001.html
上記URLの04を行なっています。

親がApp.vue、
子がTodoInput.vueです。

ソースコード①だと、App.vueの{{ todo.text }}にも反映されていますが、

ソースコード②だと、反映されず、consoleにてpropsを上書きするなと怒られます。

この両者の違いはStringとObjectの違い？なのでしょうか。
それと、実際はpropsで子に渡して、子から親は$emitを使う方法が一般的だと思うのですが、
ソースコード①は値が変わっているので、これは使えるのかという事もお聞きしたいです。

ソースコード①

App
1<template>
2  <section id="app">
3    <todo-input :todo="todo"></todo-input>
4    <label>{{ todo.text }}</label>
5  </section>
6</template>
7
8<script>
9import TodoInput from './components/TodoInput';
10
11export default {
12  name: 'App',
13  data() {
14    return {
15      todo: {
16        text: 'あああ'
17      }
18    }
19  },
20  components: {
21    TodoInput
22  }
23}
24</script>

TodoInput
1<template>
2  <input type="text"
3         v-model="todo.text">
4</template>
5
6<script>
7  export default {
8    name: 'TodoInput',
9    props: {
10      todo: {
11        type: Object
12      }
13    },
14  }
15</script>

ソースコード②

App
1<template>
2  <section id="app">
3    <todo-input :text="text"></todo-input>
4    <label>{{ text }}</label>
5  </section>
6</template>
7
8<script>
9import TodoInput from './components/TodoInput';
10
11export default {
12  name: 'App',
13  data() {
14    return {
15      text: 'あああ'
16    }
17  },
18  components: {
19    TodoInput
20  }
21}
22</script>

TodoInput
1<template>
2  <input type="text"
3         v-model="text">
4</template>
5
6<script>
7  export default {
8    name: 'TodoInput',
9    props: {
10      text: {
11        type: String
12      }
13    },
14  }
15</script>