Vue2からVue3への移行で、セレクトボックス等がうまくいかない

前提・実現したいこと

Vue2からVue3への移行がうまくいきません。
入力した数値を他の単位で計算するwebアプリを作成したいと考えており、Vue2では作成できました。

Vue2(CLI不使用)

html
1<body>
2    <div id="app">
3        <p>
4            基準単位
5            <select v-model="selected">
6                <option disabled value="">選択</option>
7                <option v-for="calitem in options" v-bind:value="calitem.name" v-bind:key="calitem.id">
8                    {{ calitem.name }}
9                </option>
10            </select>
11        </p>
12        <p>
13            <input type="number" min="0" v-model.number="inputnumber" name="number" id="num" value="" :disabled="!selected">
14            {{ selected }}
15        </p>
16        <ul>
17            <li v-if="selected === 'Q'">
18                <span>{{ calcQmm }}</span><br><span>{{ calcQpt }}</span>
19            </li>
20            <li v-else-if="selected === 'mm'">
21                <span>{{ calcMmq }}</span><br><span>{{ calcMpt }}</span>
22            </li>
23            <li v-else-if="selected === 'pt'">
24                <span>{{ calcPtq }}</span><br><span>{{ calcPtmm }}</span>
25            </li>
26            <li v-else></li>
27        </ul>
28    </div>
29    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
30    <script>
31        var app = new Vue({
32            el: '#app',
33            data: {
34                selected: '',
35                options: [
36                    {
37                        id: 1,
38                        name: 'Q'
39                    },
40                    {
41                        id: 2,
42                        name: 'mm'
43                    },
44                    {
45                        id: 3,
46                        name: 'pt'
47                    }
48                ],
49                inputnumber:0,
50            },
51            computed:{
52                calcQmm: function() {
53                    return (this.inputnumber * 0.25 + " mm")
54                },
55                calcQpt: function() {
56                    return (this.inputnumber * 0.7114 + " pt")
57                },
58                calcMmq: function() {
59                    return (this.inputnumber * 4 + " Q")
60                },
61                calcMpt: function() {
62                    return (this.inputnumber * 2.835 + " pt")
63                },
64                calcPtq: function() {
65                    return (this.inputnumber * 1.4056 + " Q")
66                },
67                calcPtmm: function() {
68                    return (this.inputnumber * 0.3514 + " mm")
69                }
70            }
71        });
72    </script>
73</body>

これを親子間でファイルを分けたVue3の状態にしたいのですが、下記の状態で詰まってしまい、うまくいかずに困っております。
エラーは出ないのですが、セレクトボックスで選択してもinputの中身が変わらず、またpタグやul内のテキストも変更されません。

該当のソースコード

Vue3（CLI使用）

Calctest1.vue（親）

html
1<template>
2  <div>
3    <calc-child1 />
4  </div>
5</template>
6
7<script lang="ts">
8import CalcChild1 from "../components/CalcChild1.vue"
9
10export default {
11  components: {
12    CalcChild1
13  }
14}
15</script>

CalcChild1.vue（子）

html
1<template>
2  <div>
3    <p>
4      基準単位<br>
5      <select v-model="selected">
6        <option disabled value="">選択</option>
7        <option v-for="calitem in options" v-bind:value="calitem.name" v-bind:key="calitem.id">
8          {{ calitem.name }}
9        </option>
10      </select>
11    </p>
12    <p>
13      <input type="number" min="0" :number="inputnumber" name="number" id="num" :disabled="!selected">
14      {{ selected }}
15    </p>
16    <ul>
17      <li v-if="selected === 'Q'">
18        <span>{{ calcQmm }}</span><br><span>{{ calcQpt }}</span>
19      </li>
20      <li v-else-if="selected === 'mm'">
21        <span>{{ calcMmq }}</span><br><span>{{ calcMpt }}</span>
22      </li>
23      <li v-else-if="selected === 'pt'">
24        <span>{{ calcPtq }}</span><br><span>{{ calcPtmm }}</span>
25      </li>
26      <li v-else></li>
27    </ul>
28  </div>
29</template>
30
31<script lang="ts">
32import { defineComponent, reactive, computed, ref } from "vue"
33
34export default defineComponent({
35  setup() {
36    let selected = '';
37
38    let options = reactive([
39      {
40        id: 1,
41        name: 'Q'
42      },
43      {
44        id: 2,
45        name: 'mm'
46      },
47      {
48        id: 3,
49        name: 'pt'
50      }
51    ]);
52
53    let inputnumber = reactive(ref(0));
54
55    let calcQmm = computed(function() {
56      return (inputnumber.value * 0.25 + " mm")
57    });
58
59    let calcQpt = computed(function() {
60      return (inputnumber.value * 0.7114 + " pt")
61    });
62
63    let calcMmq = computed(function() {
64      return (inputnumber.value * 4 + " Q")
65    });
66
67    let calcMpt = computed(function() {
68      return (inputnumber.value * 2.835 + " pt")
69    });
70
71    let calcPtq = computed(function() {
72      return (inputnumber.value * 1.4056 + " Q")
73    });
74
75    let calcPtmm = computed(function() {
76      return (inputnumber.value * 0.3514 + " mm")
77    });
78
79    return {
80      selected,
81      options,
82      inputnumber,
83      calcQmm,
84      calcQpt,
85      calcMmq,
86      calcMpt,
87      calcPtq,
88      calcPtmm
89    }
90  }
91
92})
93</script>

試したこと

let inputnumber = reactive(ref(0));
のすぐ下に
console.log(inputnumber.value);
を入れてみたところ、inputに何も入っていないのにコンソールに0が出てきました。
console.logにselectedを入れてみましたが何も取れませんでした。

よろしくお願いいたします。