How to correctly use “scoped” styles in VueJS single file components?

You can read on the Vue loader’s docs:

A child component’s root node will be affected by both the parent’s scoped CSS and the child’s scoped CSS.

This is apparently what it is meant to do, even though it might seem a bit confusing.

If you want to avoid that, you should use css modules:

<template>
<div :class="$style.baz">
  <Bar></Bar>
</div>
</template>

<style module>
.baz {
  color: red;
}
</style>