为什么这个CSS不被vue.js限制范围?

在Vue单个文件组件中,我有一个范围如下的样式部分:

<style scoped>
@media screen and (max-width: 767px) {
    #suggestions, #form, #mapcontainer, #searchcontainer {
        width: 100%; padding: 6px;
    }
    #mapcontainer div#mapx {
        height: 400px
    }
}

@media screen and (min-width: 768px) {
    #workarea {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
    }
    #mapcontainer {
        grid-column: 1;
    }
    .blurb {
        grid-column: 2;
        margin-left: 12px;
    }

    #mapcontainer div#mapx {
        height:600px;
        width: 100%;
    }
}

#suggestions tr { border-bottom: thin solid silver;  }
#suggestions td { padding: 6px 3px 6px 3px }
#suggestions table { margin-bottom: 12px }
</style>

After checking the rendered source in Chrome's inspector I see the data tag in the rendered component like this:

<div data-s-0="" id="appspace">

but I don't see any of the changes documented in the section about scoped CSS in the vue.js docs

It seems to happen every time the scoped style contains a @media query.

我需要更改什么以使样式保持范围?

评论