Is Vue 3 backwards compatible with Vue 2? - vue.js

Question

In different posts around the internet (for example this one) I found that Vue 2 code should work with Vue 3 but for me it does not. For example I have simple component
<template>
<div class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
mounted() {
alert('mounted');
},
created() {
alert('created');
}
};
</script>
The table is generated just fine, but both mounted and created not fired when component made. Also the email and id not shown. Only the table is shown.

Answer 1

Your code works:
Vue.createApp({
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
created() {
alert('created')
},
mounted() {
alert('mounted')
}
}).mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app" class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>