Vue-loader: Styles not being scoped

[rbrtmrtn]

I used vue-cli with the webpack-simple template to start a basic project. I have a component that looks like this:

<template>
    <div class="map" />
</template>

<script>
  import { Map } from 'leaflet';

  export default {
    mounted() {
      this.$leafletElement = this.createLeafletElement();
    },
    methods: {
      createLeafletElement() {
        console.log('map: create leaflet el', this.$el);
        return Map(this.$el);
      }
    }
  };
</script>

<style scoped>
  .map {
    height: 100%;
    weight: 100%;
  }
</style>

Although my script tag has the scoped attribute, when I run the dev server I'm seeing the raw class of map being applied. This is the output of the one console statement in createLeafletElement:

<div data-v-34e093f0 class="map"></div>

Is there anything I have to specify in the vue-loader config to make this work? I haven't made any significant changes to my webpack config, but here it is for completeness.

[ktsn]

This is expected behavior.
http://vue-loader.vuejs.org/en/features/scoped-css.html

[rbrtmrtn]

Ah I see now, I was expecting the CSS class itself to get a unique ID. I'll go ahead and close this out. Thanks @ktsn !