为什么使用.resetFields()重置 无效？

<el-form
      :model="articleData"
      :ref='articleData'
      :rules="editRules"
      label-position="right"
      label-width="80px"
    >

设置了form 之后
对应的prop也设置了

<el-row>
        <el-col :sm="24" :md="16">
          <el-form-item label="文章标题" prop="name">
            <el-input v-model="articleData.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="24" :md="16">
          <el-form-item label="栏目"  class="catalog-list" prop="catalogs">
            <el-dropdown trigger="click" placement="bottom-start" style="width:100%" id="dropdown">
              <el-select

点击提交按钮 想要重置

console.log(this.$refs['articleData'],'这里是获取的refs')
      if (this.$refs['articleData']!==undefined) {
          this.$refs['articleData'].resetFields();
      }

这里的console.log获得的是undefined
这是为什么？

ref 不需要加‘：’

不是应该这样写的吗，this.$refs.articleData