Laravel Mix v4.0 | non scoped style in the component was all merged to public/css/app.css

Question

I am trying to upgrade Laravel Mix in my Laravel project from v2.x to v4.x Everything works fine in v2.x

I have multiple components declared globally which is only called on specific pages

app.js

function pageIs(page, data) {
  if ($('body').data('page') === page) return data;

  return {};
}

const ClientCompaniesComponents = pageIs('client-companies', {
  'client_companies_listing': require('./components/ClientCompanies/List').default,
  'company_users_invitations': require('./components/ClientCompanies/InvitationList').default,
  'client_company_edit': require('./components/ClientCompanies/Edit').default,
  'client_company_show': require('./components/ClientCompanies/Show').default,
});

....

const AllComponents = {
  ...ClientCompaniesComponents,
  // other components
}

new Vue({
    el: '#vue_app_content',
    components: AllComponents,
....

For each component may contains local styles

<style>
  .mb1 {
    margin-bottom: 1em;
  }

  .first {
    margin-left: 30px;
  }
</style>

In Laravel Mix v2.x, local styles were not bundles in css/app.css and style will only work in specific pages in which the component was called.

In Laravel Mix v4.0, all local styles are now bundled in css/app.css

What should I do to keep the same behavior from v2.x?

extractVueStyles: true component styles bundled in css/app.css,

extractVueStyles: false all styles added as for all pages

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .options({
      extractVueStyles: true
   })
   .version();