img 바인딩 질문입니다.

<template>
  <div>
    <img :src="url" />
  </div>
</template>
<script>
export default {
  name:'',
  components : {},
  data(){
    return {
      url: '../assets/logo.png'
    };
  },
  setup(){},
  created(){},
  mounted(){},
  methods: {
  },
}
</script>
<style scoped>

</style>

처음에 vue프로젝스를 시작할때 이미지 파일이 있어서 이거를 url로 넣고 바인딩을 시도 했는데 브라우저에 화면이 나오지 않는 현상이 있는데요 모든 컴포넌트는 같은 위치에 있어서 경로가 틀렸다고 생각하지 않는데 이건 왜그런걸까요?

추가로 이미지에 바로 경로를 넣어 주었을때는 정상적으로 이미지가 나오고 있습니다.