Div containing vue app has no elements in it, when it clearly does

I've just started learning Vue.js, and I'm following the Vue Mastery beginners course right now. For some reason, my div with id app, contains no elements when I inspect it on Chrome, when clearly it does in my html code. I also found that when I comment the script tag that contains my main JavaScript file, the html elements appear on the page. Please help!

main.js

const app = Vue.createApp({
    data() {
        return {
            cart:0,
            product: 'Soks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
            ]
        }
    },
    methods: {
        addToCart() {
            this.cart += 1
        },
        updateImage(variantImage) {
            this.image = variantImage
        }
    }
})

index.html

<div id="app">
  <div class="nav-bar"></div>

  <div class="cart">Cart({{ cart }})</div>
  
  <div class="product-display">
    <div class="product-container">
      <div class="product-image">
        <img v-bind:src="image">
      </div>
      <div class="product-info">
        <h1>{{ product }}</h1>
        <p v-if="inStock">In Stock</p>
        <p v-else>Out of Stock</p>
        <ul>
          <li v-for="detail in details">{{ detail }}</li>
        </ul>
        <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image">{{ variant.color }}</div>
        <button class="button" @click="addToCart">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<!-- Import App -->
<script src="./main.js"></script>

<!-- Mount App -->
<script>
  const mountedApp = app.mount('#app')
</script>

A screenshot of index.html