[1168] How to config load jQuery from external module?

I used to follow this tutorial when using vue.js and it works. https://webpack.js.org/configuration/externals/

but i tried like this

// nuxt.config.js
head: {
  script: [
    { src: 'https://code.jquery.com/jquery-3.2.1.min.js', integrity: 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=', crossorigin: 'anonymous' }
  ]
},
build: {
  extend (config, ctx) {
    config.externals = {
      jquery: 'jQuery'
    }
  }
}

// ~/components/MyComponent.vue
<script>
import $ from 'jquery'

export default {
  mounted () {
    if (process.BROWSER_BUILD) {
      console.log($(this))
    }
  }
}
</script>

and try import in some component but got errors message.

This dependency was not found:
* jQuery in multi vue vue-router vue-meta vuex jQuery
To install it, you can run: npm install --save jQuery

Now, I'm not import module but access jquery via window.$(this) instead.