Do you see anything wrong with this code

Hello,

Do you see anything wrong with this code:

<template>
    <img alt="Vue logo" src="./assets/logo.png" />
    <NavMenu />
    <router-view />
    <Upload1 />
</template>

<script>

    //import PhotoEditor from "./components/PhotoEditor.vue";
    import Upload1 from "./components/Upload1.vue";
    //<img alt="Vue logo" src="./assets/logo.png" />
    import NavMenu from "./components/NavMenu.vue";

    export default {
        name: "App",
        components: {

            NavMenu,
            Upload1
        },
    };
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

VS code constantly shows this component in red.

Thanks,

Which part shows up as red?

App. vue.
It has not shown red since I wrapped it in the div tag.
But the result is wrong!!
You can see the code here:

Everything is great in CodeSandBox but you can not see anything in VScode. I mean the result is wrong. Please inform me.