I'm working on a Vue.js and Laravel project where the Vue is inside the resources/js directory of the Laravel project.

I'm having a problem with loading an image that I just put inside the resources/js/assets directory. I'm using a template so there are few images inside the folder already, and when I tried to load a new image file that I just put, the image won't be loaded. But when I tried to load the other image (which is the older image inside the directory) the image showed up. I'm trying to add the image as the background image of the page. Here is my code to do it.

HTML:

<div class="page-header align-items-start min-vh-100" :style="{ backgroundImage: 'url(' + bgImage + ')' }">

Vue (JS):

export default {
    name: "login",
    data() {
        return {
            bgImage: "/assets/img/office-dark.jpg"
        };
    }

I tried every new image file and that is when the problem occurred (no errors, the image just won't be loaded). The old image files are okay. Any suggestions?