diff --git a/lib/loader.js b/lib/loader.js
index 8720f7250..85af78a04 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -522,11 +522,13 @@ module.exports = function (content) {
       // $2: ?a=b
       const query = loaderUtils.parseQuery($2 || '?')
       Object.assign(query, OPTIONS, option, DEFAULT_OPTIONS)
-      if (index !== -1) {
+      if (index > 0) {
         // Note:
         //   Class name is generated according to its filename.
-        //   Different <style> tags in the same .vue file may generate same names.
+        //   Different `<style>` tags in the same `.vue` file may generate same names.
         //   Append `_[index]` to class name to avoid this.
+        //   But the 1st `<style>` tag will be ignored from this update.
+        //   See https://github.com/vuejs/vue-loader/issues/703
         query.localIdentName += '_' + index
       }
       return $1 + '?' + JSON.stringify(query)
diff --git a/test/test.js b/test/test.js
index 4b293bfc0..1212a2209 100644
--- a/test/test.js
+++ b/test/test.js
@@ -620,17 +620,18 @@ describe('vue-loader', () => {
         // default module + pre-processor + scoped
         const anotherClassName = instance.$style.red
         expect(anotherClassName).to.match(regexToMatch).and.not.equal(className)
+        expect(anotherClassName).to.match(/_1$/)
+        expect(anotherClassName).to.equal(className + '_1')
         const id = 'data-v-' + genId('css-modules.vue')
         expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
-
         cb()
       })
     }
     // default localIdentName
-    testWithIdent(undefined, /^\w{23}/, () => {
+    testWithIdent(undefined, /^\w{21,23}/, () => {
       // specified localIdentName
       const ident = '[path][name]---[local]---[hash:base64:5]'
-      const regex = /^test-fixtures-css-modules---red---\w{5}/
+      const regex = /^test-fixtures-css-modules---red---\w{5,7}/
       testWithIdent(ident, regex, done)
     })
   })