Apollo client with Vue and rails - ruby-on-rails

Question

I have a rails app which is actually a clone of yts.mx. Now the idea was to have the front-end work in Vue.js, for which I created an independent Vue project inside the root directory of the existing rails app.
I have written GraphQl queries and tried using apollo client for communication with Vue but it gives me a dependency not found error with the path of the module Iv'e imported.
This dependency was not found:
* graphql/queries/movies/retrieveMovies.gql in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MovieBlock.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save graphql/queries/movies/retrieveMovies.gql
Here's my retrieveMovies.gql file
query {
movies{
name
release_date
}
}
here's the script tag for the MovieBlock.vue Vue component
<script>
import GET_MOVIES from 'graphql/queries/movies/retrieveMovies.gql'
export default {
name: 'MovieBlock',
apollo: {
movies: {
query: GET_MOVIES,
update: data => {
debugger
}
}
},
data () {
return {
movies: []
}
}
}
</script>
Here's the Directory Structure of the project: