Why is the vue component not rendering?

Question

Vue.js

Hello, I have such a js file that is going to webpack in build.js file

// import dependens
import Vue from 'vue';
Vue.config.productionTip = false

import CheckoutHeader from './checkout/CheckoutHeader.vue'

import axios from 'axios'
import _ from 'lodash'

new Vue({
    el: '#checkoutApp',
    data: {
        rrr: 123,
    },
    components: {
        CheckoutHeader
    },
    methods: {
        reloadCart() {}
    },
    mounted() {
    }

});

And this html file

<script src="/dev/build.js"></script>
        <div id="checkoutApp">
            <checkout-header></checkout-header>
{{ rrr }}
            <div class="order_title">Оформление заказа VUE</div>

        </div>

The problem is that nothing is displayed on the page and components are not created, usually it was done through the render function and everything was ok, but here you need to do just that. I can’t understand how to connect everything correctly
UPD1
If I connect build.js at the end of the file, then just a white page is displayed

Answer 1

If you set up webpack:
1. index.html

<div id="app-root"></div>
<script src="/dev/build.js"></script>

2.main.js

import Vue from 'vue';
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  el: '#app-root',
  render: (h) => h(App),
});

3.app.vue

<template>
<div>
  <checkout-header></checkout-header>
  {{ rrr }}
  <div class="order_title">Оформление заказа VUE</div>
</div>
</template>

<script>
import CheckoutHeader from './checkout/CheckoutHeader.vue'
import axios from 'axios'
import _ from 'lodash'

export default {
  data: () => ({
    rrr: 123,
  }),

  components: {
    CheckoutHeader
  },

  methods: {
    reloadCart() {}
  },
}
</script>

If without webpack, then post the code https://codesandbox.io/s/vue Who will be too lazy to check it for themselves?

Answer 2

You forgot to mount all this happiness in the right house-element. Therefore, there are no errors and everything is clean in the console. There is just a view instance that is not connected to anything and a non-interactive template