why my css code is not working in vuejs? : <p>I've got problem with css in VueJs. Sorry for poor description, but I have no idea what I'm doing wrong. </p>

<p>My css in style scoped works generally fine in vuejs, I can normally address idis and classes. </p>

<p>The problem is when I want to change for example value of internal css of an element of vuetify framework, or wysiwyg editor. I don't understand, because on codepen everything works fine. For example here I'm setting padding of wysiwig editor to 0 and it simply works (in codepen):</p>

<p>template:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div id="editor-container"&gt;

  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>script</p>

<pre><code>var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose the most wonderful and amazing epic you could ever imagine!',
  theme: 'snow'  // or 'bubble'
});
</code></pre>

<p>style</p>

<pre><code>.ql-editor {
  padding: 0!important;
}
</code></pre>

<p>On my vuejs SPA I'm pasting the exactly the same css code and it does nothing. I'm in the right component, adressing right element. In my console, when I'm doing inspect - I see properties of .q1-editor as padding 12px etc. So nothing is changing in my website :(
I'm sorry for poor explanation - css is not my primary language. </p>

<p>Maybe someone who have more experience with css will have an idea what I'm doing wrong.</p>
