How to define component location with VueJS async components and webpack

I've introduced async VueJS components to a Laravel project which is being complied with webpack.

All complied assets are being placed into a subfolder (mix) which is defined in webpack.mix.js as mix.webpackConfig().setPublicPath('public/mix'), this is working fine.

Vue does not know that the async components are in the sub folder, it's looking for them in /js/component_name.js, when they are in /mix/js/component_name.js. If I move the compiled components to the expected location, everything works as expected.

I'm assuming it's possible to tell Vue that the components are in a different location - how do I do that?

...and a bonus (possibly related) question - can I control how the components are named? They're currently being compiled with really long names, e.g. resources_assets_js_vue_ComponentName_vue.js.

Cheers