unordered list nested in ordered list not giving the expected result in a vuejs application

Question

How can I nest an unordered list in an ordered list in vue 2 ?? I have tried

<template>
  <div class="p-14">
    <ol class="numberlist">
      <li>An numbered list</li>
      <li>Containing

        <ul class="sqaredotlist">
          <li>A dotted list</li>
          <li>Containing

            <ol class="romanlist">
              <li>A roman numeral list</li>
              <li>And some items</li>
              <li>Like this</li>
            </ol>
          </li>
          <li>And some items</li>
          <li>Like this</li>
        </ul>
      </li>
      <li>And some items</li>
      <li>Like this</li>
    </ol>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  ol.numberlist {
    list-style-type: decimal;
  }

  ul.sqaredotlist {
    list-style-type: square;
  }

  ol.romanlist {
    list-style-type: lower-roman;
  }
</style>

but that gives me. It looks like the unordered elements are interpreted as ordered.

1. An numbered list.
2. Containing
1. A dotted list
2. Containing
1. A roman numeral list
2. And some items
3. Like this
3. And some items
4. Like this
3. And some items
4. Like this

Without the css classes I get the same result. If anyone knows how to nest an unordered list in an ordered list, please help me !!

Answer 1

Perhaps a different file in your directory is affecting this Vue file. Is there a 'global' stylesheet in your project? Maybe that stylesheet says:

li {
    list-style-type: decimal !important;
}