처음 vue를 접하다보니 로직 흐름이 잘 이해가 안됩니다..ㅠㅠ

처음 vue를 배우는데 강좌를 계속 듣다보니 의아한게 있어서 질문드립니다..

로직 흐름이 어려워서 이런 문의를 드리게 됬습니다..ㅠㅠ

예를들어 말씀드리면,

1. 검색창 input태그(HTML)로 작성한 부분을 템플릿(#search-form) 으로 바꾸고 , 기존에 검색창 input(html)이 있던 자리에 디렉토리(search-form)를 만드셨는데 왜 이렇게 하신건가요?

2.템플릿(#search-form)에 검색창에 필요한 기능들이 있는데,  아래 예시와 같이 디렉토리(search-form)에 추가 기능을 넣는 이유가 먼가요?

ex. <search-form v-bind:value="query" v-on:@submit="onSubmit"

        v-on:@reset="onReset"></search-form>

3. app.js만 작성하다가 개발이 완료된 후,  컴포넌트 작성이 추가됬는데요. 왜 컴포넌트 작성을 추가하신건가요? 그리고 인스턴스와 컴포넌트 무슨 관계라고 생각하면 될까요?