json 파일 import 하려는데 컴파일 오류 뜹니다 ㅠㅠ

백엔드에서 생성해주는 json 파일을 get으로 가져오지 않고 vue에서 바로 뿌려주려고 하는데

module not found: Error: can't resolve 에러가 뜹니다 ㅠㅠ

top100.json

{
    "top100":[
        {
            "song_code":94932434,
            "album_code":82387392,
            "album_image":"https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/082/387/392/82387392_1636696960130_1_600x600.JPG",
            "artist_code":80675406,
            "title":"회전목마 (Feat. Zion.T & 원슈타인) (Prod. by Slom)",
            "title_with_artist":"sokodomo-회전목마 (Feat. Zion.T & 원슈타인) (Prod. by Slom)"
        },

       { ... 데이터 계속... }
    ]
}

이런 파일이고 컴포넌트 App.vue <script> 태그에서 import top100 from '/json/top100.json' 으로 가져오고 data() return 쪽에서 printData: top100으로 줬고 <template> 태그에서 {{printData}} 썼는데 컴파일이 안됩니다 ㅠㅠ

top100.json 파일은 public/json/top100.json 에 있습니다. 어디가 문제일까요?